{"id":36,"date":"2009-10-30T15:55:00","date_gmt":"2009-10-30T15:55:00","guid":{"rendered":"http:\/\/www.codeboss.in\/web-funda\/?p=36"},"modified":"2009-10-30T15:55:00","modified_gmt":"2009-10-30T15:55:00","slug":"get-selected-index-and-option-text-with-javascript","status":"publish","type":"post","link":"https:\/\/codeboss.in\/web-funda\/2009\/10\/30\/get-selected-index-and-option-text-with-javascript\/","title":{"rendered":"Get Selected Index And Option Text With JavaScript"},"content":{"rendered":"<p>The below example shows how to get the value, selected index, selected text of a drop down with JavaScript.<\/p>\n<p>The HTML select is below <\/p>\n<pre class=\"brush:html\">\n<select name=\"jstest\" id=\"jstestid\" onchange=\"firejs()\">\n<option value=\"\">Select a value<\/option>\n<option value=\"one\">First Option<\/option>\n<option value=\"two\">Second Option<\/option>\n<option value=\"three\">Third Option<\/option>\n<option value=\"four\">Fourth Option<\/option>\n<\/select>\n<\/pre>\n<p>Now the JavaScript to get the values. Within the firejs function (that is fired with onchange event) the following can be used. In the example we will select &#8216;Third Option&#8217;.<\/p>\n<p><span style=\"font-weight:bold;\">obj = document.getElementById(&#8216;jstestid&#8217;)<\/span> assigns the select element obj to variable obj<\/p>\n<p><span style=\"font-weight:bold;\">obj.value<\/span>  value of the selected option = &#8216;three&#8217;<\/p>\n<p><span style=\"font-weight:bold;\">obj.selectedIndex<\/span> value of the selected index = &#8216;3&#8217;<\/p>\n<p><span style=\"font-weight:bold;\">obj.options[obj.selectedIndex].text<\/span>  text of the selected option = &#8216;Third Option&#8217;<\/p>\n<p><span style=\"font-weight:bold;\">obj.options[obj.selectedIndex].value<\/span> value of the selected option = &#8216;3&#8217;<\/p>\n<p><span style=\"font-weight:bold;\">obj.options[obj.selectedIndex].text = &#8216;New Third Option&#8217;<\/span>  changes the text of the selected option i.e. &#8216;Third Option&#8217; to &#8216;New Third Option&#8217;<\/p>\n<p><span style=\"font-weight:bold;\">obj.options[obj.selectedIndex].text<\/span> now the text of the selected option after being changed = &#8216;New Third Option&#8217;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The below example shows how to get the value, selected index, selected text of a drop down with JavaScript. The HTML select is below Select a value First Option Second Option Third Option Fourth Option Now the JavaScript to get the values. Within the firejs function (that is fired with onchange event) the following can&hellip; <a class=\"more-link\" href=\"https:\/\/codeboss.in\/web-funda\/2009\/10\/30\/get-selected-index-and-option-text-with-javascript\/\">Continue reading <span class=\"screen-reader-text\">Get Selected Index And Option Text With JavaScript<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[48,51],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-html","tag-javascript-2","entry"],"_links":{"self":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":0,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"wp:attachment":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}