{"id":500,"date":"2022-02-01T15:56:29","date_gmt":"2022-02-01T14:56:29","guid":{"rendered":"https:\/\/alessandromasciadri.com\/?p=500"},"modified":"2022-02-01T17:13:56","modified_gmt":"2022-02-01T16:13:56","slug":"come-leggere-con-javascript-il-valore-di-un-tag-select","status":"publish","type":"post","link":"https:\/\/alessandromasciadri.com\/come-leggere-con-javascript-il-valore-di-un-tag-select\/","title":{"rendered":"Come leggere con JavaScript il valore di un tag select"},"content":{"rendered":"\t\t<div data-akihiro-type=\"ama-post\" data-akihiro-id=\"500\" class=\"akihiro akihiro-500\" data-akihiro-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"akihiro-section akihiro-top-section akihiro-element akihiro-element-7892d5c akihiro-section-boxed akihiro-section-height-default akihiro-section-height-default\" data-id=\"7892d5c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"akihiro-container akihiro-column-gap-default\">\n\t\t\t\t\t<div class=\"akihiro-column akihiro-col-100 akihiro-top-column akihiro-element akihiro-element-24304f3\" data-id=\"24304f3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"akihiro-widget-wrap akihiro-element-populated\">\n\t\t\t\t\t\t<div class=\"akihiro-element akihiro-element-5dd9300 akihiro-widget akihiro-widget-text-editor\" data-id=\"5dd9300\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In questo caso abbiamo una pagina web in cui \u00e8 presente un menu a tendina di cui vogliamo conoscere il valore selezionato dall&#8217;utente.<\/p><p>La struttura del tag HTML \u00e8 la seguente:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-7fc8347 akihiro-widget akihiro-widget-code-highlight\" data-id=\"7fc8347\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><select class=\"form-select\">\r\n    <option selected>Seleziona una voce<\/option>\r\n    <option value=\"1-Auto\">Auto<\/option>\r\n    <option value=\"2-Moto\">Moto<\/option>\r\n    <option value=\"3-Bicicletta\">Bicicletta<\/option>\r\n<\/select><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-febbc48 akihiro-widget akihiro-widget-text-editor\" data-id=\"febbc48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Grazia a JavaScript possiamo ottenere il valore della selezione del menu a discesa HTML selezionando il tag con un metodo di selezione (getElementById() in questo caso) e poi richiamando la propriet\u00e0 selectedIndex.<\/p><p>Il codice JavaScript \u00e8 il seguente:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-688a0f6 akihiro-widget akihiro-widget-code-highlight\" data-id=\"688a0f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>var select = document.getElementById('trasporto');\r\nvar value = select.options[select.selectedIndex].value;\r\nconsole.log(value);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-8f3fe40 akihiro-widget akihiro-widget-heading\" data-id=\"8f3fe40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t<span class=\"akihiro-heading-title akihiro-size-default\">Output<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-3609f5f akihiro-widget akihiro-widget-text-editor\" data-id=\"3609f5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se ipotiziamo che l&#8217;utente selezioni la voce Auto dal menu a tendina, in console avremo il seguente output:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-9ee20fc akihiro-widget akihiro-widget-code-highlight\" data-id=\"9ee20fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-bash \">\n\t\t\t\t<code readonly=\"true\" class=\"language-bash\">\n\t\t\t\t\t<xmp>1-Auto<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In questo caso abbiamo una pagina web in cui \u00e8 presente un menu a tendina di cui vogliamo conoscere il valore selezionato dall&#8217;utente. La struttura del tag HTML \u00e8 la seguente: Seleziona una voce Auto Moto Bicicletta Grazia a JavaScript possiamo ottenere il valore della selezione del menu a discesa HTML selezionando il tag con [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14],"class_list":["post-500","post","type-post","status-publish","format-standard","hentry","category-programmazione","tag-javascript"],"_links":{"self":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/comments?post=500"}],"version-history":[{"count":9,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/500\/revisions"}],"predecessor-version":[{"id":509,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/500\/revisions\/509"}],"wp:attachment":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/media?parent=500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/categories?post=500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/tags?post=500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}