{"id":387,"date":"2011-12-20T14:59:10","date_gmt":"2011-12-20T14:59:10","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:07:01","modified_gmt":"2017-11-16T23:07:01","slug":"lesson-21-creating-selection-list","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/","title":{"rendered":"JavaScript Lesson 21: Creating a Selection List"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\">&lt;Lesson 20&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\">&lt;Lesson 22&gt;<\/a><\/strong><\/h4>\n<p>A selection list\u00a0lets users choose an item from a list of items. For example, online shopping malls such as Amazon.com or auction sites such as ebay.com\u00a0let you select categories of products from a drop-down list. In\u00a0JavaScript, you can create a selection list easily using the &lt;SELECT &gt;tag. The &lt;SELECT&gt; tag creates a Listbox and the &lt;OPTION&gt; tags create the items inside the Listbox. The number of &lt;OPTION&gt; tags is unlimited. The close tag for the Listbox is &lt;\/SELECT&gt;<\/p>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\nThe Listbox can display many items together with a scroll bar. The number of items shown is specified by the SIZE attribute. If the SIZE attribute is left out, the Listbox will be displayed as a dropdown box, where only one item is shown and the user needs to click to see more items.<\/p>\n<h4><strong>Example 21.1: A listbox that displays all the items at once<\/strong><\/h4>\n<p>A listbox that displays all the items at once<\/p>\n<pre>&lt;SELECT SIZE=\"3\"&gt;\r\n\r\n&lt;OPTION&gt;PCs\r\n\r\n&lt;OPTION&gt;Laptops\r\n\r\n&lt;OPTION&gt;Tablet Computers\r\n\r\n&lt;\/SELECT&gt;\r\n<\/pre>\n<p>The Output<\/p>\n<p><select name=\"Computers\" size=\"3\"><option>PCs<\/option><option>Laptops<\/option><option>Tablet Computers<\/option><\/select><br \/>\nIn this example, you will see a drop-down Listbox which displays only one item. You need to click on the small arrow on the right of the Listbox to view other items.<\/p>\n<h4><strong>Example 21.2: A drop-down Listbox<\/strong><\/h4>\n<pre>&lt;SELECT&gt;\r\n\r\n&lt;OPTION&gt;PCs\r\n\r\n&lt;OPTION&gt;Laptops\r\n\r\n&lt;OPTION&gt;Tablet Computers\r\n\r\n&lt;\/SELECT&gt;\r\n<\/pre>\n<p>The output:<\/p>\n<p><select name=\"Computers\"><option>PCs<\/option><option>Laptops<\/option><option>Tablet Computers<\/option><\/select><\/p>\n<p>To check which item is selected in the listbox, we can use the selectedIndex property of the listbox object.\u00a0Item one returns an index value of 0, follows by 1 for item2 and so forth. Note that if no item is selected, selectedIndex returns an index value of -1. In order to run the test, we need to create a JavaScript function and use it together with the FORM object. Take a look at Example 21.3:<\/p>\n<h4><strong>Example 21.3<\/strong><\/h4>\n<pre>&lt;SCRIPT&gt;\r\n\r\nfunction testItem(form) {\r\n\r\nalert(\"Item \"+form.mylist.selectedIndex+\" is selected\");\r\n\r\n}\r\n\r\n&lt;\/SCRIPT&gt;\r\n\r\n&lt;FORM ACTION=\"\" METHOD=\"GET\"&gt;\r\n\r\n&lt;SELECT SIZE=\"3\"&gt;\r\n\r\n&lt;OPTION&gt;PCs\r\n\r\n&lt;OPTION&gt;Laptops\r\n\r\n&lt;OPTION&gt;Tablet Computers\r\n\r\n&lt;\/SELECT&gt;\r\n\r\n&lt;INPUT Value=\"Check Item\" onClick\"testItem(this.Form)\"&gt;\r\n\r\n&lt;\/FORM&gt;\r\n<\/pre>\n<p>The output is shown below and you can click on the Check Item button to test.<\/p>\n<p>Here is another good working\u00a0example\u00a0using the\u00a0options button in JavaScript. You can select a certain item then click OK, it will bring you to the selected page.<\/p>\n<h4><strong>Example 21.4: Books Selection ListBox<\/strong><\/h4>\n<p><strong>The Code<\/strong><\/p>\n<pre>&lt;SCRIPT&gt;\r\n\/\/created by Liew Voon Kiong April 24 1998 All Rights Reserved.\r\n\r\nfunction loadHtml(form){\r\nif (form.list.selectedIndex==0) location=\"art.html\"\r\nif (form.list.selectedIndex==1) location=\"astro.html\"\r\nif (form.list.selectedIndex==2) location=\"bestsell.html\"\r\nif (form.list.selectedIndex==3) location=\"business.html\"\r\nif (form.list.selectedIndex==4) location=\"children.html\"\r\nif (form.list.selectedIndex==5) location=\"computer.html\"\r\nif (form.list.selectedIndex==6) location=\"health.html\"\r\nif (form.list.selectedIndex==7) location=\"mystery.html\"\r\nif (form.list.selectedIndex==8) location=\"horror.html\"\r\nif (form.list.selectedIndex==9) location=\"nonfic.html\"\r\nif (form.list.selectedIndex==10) location=\"romance.html\"\r\nif (form.list.selectedIndex==11) location=\"science.html\"\r\nif (form.list.selectedIndex==12) location=\"scific.html\"\r\nif (form.list.selectedIndex==13) location=\"self.html\"\r\nif (form.list.selectedIndex==14) location=\"sports.html\"\r\nif (form.list.selectedIndex==15) location=\"travel.html\"\r\nif (form.list.selectedIndex==16) location=\"young.html\"\r\nif (form.list.selectedIndex==17) location=\"music.html\"\r\n\r\n}\r\n&lt;\/Script&gt;\r\n\r\n&lt;FORM\u00a0NAME=\"book\" ACTION=\"\" METHOD=\"GET\"&gt;\r\n\r\n&lt;SELECT size=\"4\"&gt;\r\n&lt;OPTION&gt;Art and Drawing\r\n&lt;OPTION&gt;Astronomy\r\n&lt;OPTION&gt;Best Sellers\r\n&lt;OPTION&gt;Business &amp; Investment\r\n&lt;OPTION&gt;Children Books\r\n&lt;OPTION selected&gt;Computer &amp; Internet\r\n&lt;OPTION&gt;Health &amp; Fitness\r\n&lt;OPTION&gt;Mystery\r\n&lt;OPTION&gt;Horror &amp; Thriller\r\n&lt;OPTION&gt;Non Fiction\r\n&lt;OPTION&gt;Romance\r\n&lt;OPTION&gt;Science &amp; Nature\r\n&lt;OPTION&gt;Science Fiction\r\n&lt;OPTION&gt;Self Improvement\r\n&lt;OPTION&gt;Sports &amp; Games\r\n&lt;OPTION&gt;Travel\r\n&lt;OPTION&gt;Young Readers' Corner\r\n&lt;OPTION&gt;Music\r\n&lt;\/SELECT&gt;&lt;INPUT Value=\"OK\"&gt;&lt;font size=\"2\"&gt;\r\n&lt;\/font&gt;\r\n&lt;\/p&gt;\r\n&lt;\/FORM&gt;\r\n\r\n<\/pre>\n<p>Click <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/javascrpt_Example21.htm\">Example 21<\/a> to see the output.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-20-checkboxes-javascript\/\">&lt;Lesson 20&gt;<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\">&lt;Lesson 22&gt;<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 20&gt; [Contents] &lt;Lesson 22&gt; A selection list\u00a0lets users choose an item from a list of items. For example, online shopping malls such as Amazon.com or auction sites such as ebay.com\u00a0let you select categories of products from a drop-down list. In\u00a0JavaScript, you can create a selection list easily using the &lt;SELECT &gt;tag. The &lt;SELECT&gt; tag &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;JavaScript Lesson 21: Creating a Selection List&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-387","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson illustrates the creation of selection list in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson illustrates the creation of selection list in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:07:01+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\",\"name\":\"JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T14:59:10+00:00\",\"dateModified\":\"2017-11-16T23:07:01+00:00\",\"description\":\"This javascript lesson illustrates the creation of selection list in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 21: Creating a Selection List\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson illustrates the creation of selection list in javascript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson illustrates the creation of selection list in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:07:01+00:00","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/","name":"JavaScript Lesson 21: Creating a Selection List - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T14:59:10+00:00","dateModified":"2017-11-16T23:07:01+00:00","description":"This javascript lesson illustrates the creation of selection list in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 21: Creating a Selection List"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":24,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/387\/revisions"}],"predecessor-version":[{"id":2500,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/387\/revisions\/2500"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}