{"id":105,"date":"2009-01-06T11:52:44","date_gmt":"2009-01-06T16:52:44","guid":{"rendered":"http:\/\/www.dev-notes.com\/blog\/2009\/01\/06\/using-javascript-to-manipulate-html-select-dropdown-boxes\/"},"modified":"2009-01-06T11:52:44","modified_gmt":"2009-01-06T16:52:44","slug":"using-javascript-to-manipulate-html-select-dropdown-boxes","status":"publish","type":"post","link":"https:\/\/www.dev-notes.com\/blog\/2009\/01\/06\/using-javascript-to-manipulate-html-select-dropdown-boxes\/","title":{"rendered":"Using Javascript to manipulate HTML select-dropdown boxes"},"content":{"rendered":"<p>First, let us establish a sample select object as below.  The Javascript object &#8220;objSelect&#8221; will also be established to refer to this HTML object.<\/p>\n<pre class=\"code\"><xmp>\n<select id=\"colors\">\n\t<option value=\"r\">Red<\/option>\n\t<option value=\"g\">Green<\/option>\n\t<option value=\"b\">Blue<\/option>\n<\/select>\n\n<script type=\"text\/javascript\">\nvar objColors = document.getElementById(\"colors\");\n<\/script>\n<\/xmp><\/pre>\n<p>The following Javascript code can be used to display which option has been selected by the user.  If you choose &#8220;Blue&#8221;, for example, you will get alert dialogues &#8220;b&#8221;, &#8220;Blue&#8221;, and then &#8220;2&#8221;.<\/p>\n<pre class=\"code\">\nalert(objColors.value); \/\/ Display the value; in this example, red is \"r\", green is \"g\", and blue is \"b\"\nalert(objColors.options[objColors.selectedIndex].text); \/\/ Display the text; in this example, \"red\", \"green\", and \"blue\"\nalert(objColors.selectedIndex); \/\/ Display the index number; in this example, red is 0, green is 1, and blue is 2\n<\/pre>\n<p>The following Javascript code provides you the means to add a new option to the HTML select object.  &#8220;Yellow&#8221; is going to be added to the end of the list, and &#8220;White&#8221; is going to be added as the third choice.<\/p>\n<pre class=\"code\">\nvar newOption1 = document.createElement('option');\nnewOption1.text = \"Yellow\";\nnewOption1.value = \"y\";\n\nvar newOption2 = document.createElement('option');\nnewOption2.text = \"White\";\nnewOption2.value = \"w\";\n\ntry {\n\t\/\/ For standard browsers\n\tobjColors.add(newOption1, null);\n}\ncatch (ex) {\n\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\tobjColors.add(newOption1);\n}\n\ntry {\n\t\/\/ For standard browsers\n\tobjColors.add(newOption2, objColors.options[2]);\n}\ncatch (ex) {\n\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\tobjColors.add(newOption2, 1);\n}\n<\/pre>\n<p>The code below removes an option.  The first example removes index #1, or the second option.  The second example removes whatever the last option is.<\/p>\n<pre class=\"code\">\nobjColors.remove(1); \/\/ Removes index #1, or \"Green\" in our original example.\nobjColors.remove(objColors.length-1); \/\/ Removes whatever the last option is.\n<\/pre>\n<p>Finally, the code below selects a particular option.<\/p>\n<p><\npre class=\"code\"><br \/>\nobjColors.options[1].selected = true; \/\/ Selects the second option, or &#8220;Green&#8221; in our original example<\/p>\n<p>You may see the running examples below.<\/p>\n<p class=\"code\">\n<select id=\"colors\"><option value=\"r\">Red<\/option><option value=\"g\">Green<\/option><option value=\"b\">Blue<\/option><\/select><\/p>\n<p><input type=\"button\" value=\"check current choice\" onclick=\"check();\"><br \/>\n<input type=\"button\" value=\"add\" onclick=\"add();\"><br \/>\n<input type=\"button\" value=\"remove second option\" onclick=\"remove();\"><br \/>\n<input type=\"button\" value=\"remove last option\" onclick=\"removeLast();\"><br \/>\n<input type=\"button\" value=\"select\" onclick=\"selected();\"><\/p>\n<p><script type=\"text\/javascript\">\nvar objColors = document.getElementById(\"colors\");<\/p>\n<p>function check() {\n\talert(objColors.value); \/\/ Display the value; in this example, red is \"r\", green is \"g\", and blue is \"b\"\n\talert(objColors.options[objColors.selectedIndex].text); \/\/ Display the text; in this example, \"red\", \"green\", and \"blue\"\n\talert(objColors.selectedIndex); \/\/ Display the index number; in this example, red is 0, green is 1, and blue is 2<\/p>\n<p>}<\/p>\n<p>function add() {\n\tvar newOption1 = document.createElement('option');\n\tnewOption1.text = \"Yellow\";\n\tnewOption1.value = \"y\";<\/p>\n<p>\tvar newOption2 = document.createElement('option');\n\tnewOption2.text = \"White\";\n\tnewOption2.value = \"w\";<\/p>\n<p>\ttry {\n\t\t\/\/ For standard browsers\n\t\tobjColors.add(newOption1, null);\n\t}\n\tcatch (ex) {\n\t\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\t\tobjColors.add(newOption1);\n\t}<\/p>\n<p>\ttry {\n\t\t\/\/ For standard browsers\n\t\tobjColors.add(newOption2, objColors.options[2]);\n\t}\n\tcatch (ex) {\n\t\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\t\tobjColors.add(newOption2, 2);\n\t}\n}<\/p>\n<p>function remove() {\n\tobjColors.remove(1); \/\/ Removes index #1, or \"Green\" in our original example.\n}<\/p>\n<p>function removeLast() {\n\tobjColors.remove(objColors.length-1); \/\/ Removes whatever the last option is.\n}<\/p>\n<p>function selected() {\n\tobjColors.options[1].selected = true;\n}\n<\/script>\n<\/p>\n<p>Complete code to the running examples is shown below.<\/p>\n<pre class=\"code\"><xmp>\n<select id=\"colors\">\n\t<option value=\"r\">Red<\/option>\n\t<option value=\"g\">Green<\/option>\n\t<option value=\"b\">Blue<\/option>\n<\/select><br \/><br \/>\n<input type=\"button\" value=\"check current choice\" onclick=\"check();\"><br \/>\n<input type=\"button\" value=\"add\" onclick=\"add();\"><br \/>\n<input type=\"button\" value=\"remove second option\" onclick=\"remove();\"><br \/>\n<input type=\"button\" value=\"remove last option\" onclick=\"removeLast();\"><br \/>\n<input type=\"button\" value=\"select\" onclick=\"selected();\"><br \/>\n\n<script type=\"text\/javascript\">\nvar objColors = document.getElementById(\"colors\");\n\n\nfunction check() {\n\talert(objColors.value); \/\/ Display the value; in this example, red is \"r\", green is \"g\", and blue is \"b\"\n\talert(objColors.options[objColors.selectedIndex].text); \/\/ Display the text; in this example, \"red\", \"green\", and \"blue\"\n\talert(objColors.selectedIndex); \/\/ Display the index number; in this example, red is 0, green is 1, and blue is 2\n\n}\n\nfunction add() {\n\tvar newOption1 = document.createElement('option');\n\tnewOption1.text = \"Yellow\";\n\tnewOption1.value = \"y\";\n\n\tvar newOption2 = document.createElement('option');\n\tnewOption2.text = \"White\";\n\tnewOption2.value = \"w\";\n\n\ttry {\n\t\t\/\/ For standard browsers\n\t\tobjColors.add(newOption1, null);\n\t}\n\tcatch (ex) {\n\t\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\t\tobjColors.add(newOption1);\n\t}\n\n\ttry {\n\t\t\/\/ For standard browsers\n\t\tobjColors.add(newOption2, objColors.options[2]);\n\t}\n\tcatch (ex) {\n\t\t\/\/ For Microsoft Internet Explorer and other non-standard browsers.\n\t\tobjColors.add(newOption2, 2);\n\t}\n}\n\nfunction remove() {\n\tobjColors.remove(1); \/\/ Removes index #1, or \"Green\" in our original example.\n}\n\nfunction removeLast() {\n\tobjColors.remove(objColors.length-1); \/\/ Removes whatever the last option is.\n}\n\nfunction selected() {\n\tobjColors.options[1].selected = true;\n}\n<\/script>\n<\/xmp><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This note contains information on how Javascript can be used to interact with HTML&#8217;s select tag, sometimes known as the dropdown box.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":0,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}