{"id":9830,"date":"2009-10-26T13:58:25","date_gmt":"2009-10-26T17:58:25","guid":{"rendered":"https:\/\/www.bu.edu\/tech\/?page_id=9830"},"modified":"2010-04-21T10:40:54","modified_gmt":"2010-04-21T14:40:54","slug":"selection-menus","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/people\/forms\/html-elements\/selection-menus\/","title":{"rendered":"Selection Menus"},"content":{"rendered":"<p>Use selection menus to allow choices from pre-defined lists of values. This is useful both as a means of standardizing data and as a time saver for the user of the form.<\/p>\n<p>A selection menu consists of opening and closing <code>&lt;select&gt;<\/code> tags containing several <code>&lt;option&gt;<\/code> tags, corresponding to each possible value of the form field. Within the <code>&lt;select&gt;<\/code> tag you specify the field&#8217;s NAME, while the VALUE can either be given explicitly within each <code>&lt;option&gt;<\/code> tag, or will default to the text following the <code>&lt;option&gt;<\/code> tag if no VALUE is given. Either way the text following the <code>&lt;option&gt;<\/code> tags is what will appear in the menu on the web page.<\/p>\n<p>For example:<\/p>\n<p><code> &lt;form&gt;<br \/>\nMy affiliation is:&lt;br&gt;<br \/>\n&lt;select name=\"affiliation\"&gt;<br \/>\n&lt;option value=\"\"&gt; --select-- &lt;\/option&gt;<br \/>\n&lt;option&gt; Faculty &lt;\/option&gt;<br \/>\n&lt;option&gt; Staff &lt;\/option&gt;<br \/>\n&lt;option&gt; Student &lt;\/option&gt;<br \/>\n&lt;option&gt; Other &lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/form&gt;<\/code><\/p>\n<blockquote>\n<form> My affiliation is:<\/p>\n<p><select name=\"affiliation\"><option>&#8211;select&#8211;<\/option><option>Faculty <\/option><option>Staff <\/option><option>Student <\/option><option>Other <\/option><\/select> <\/form>\n<\/blockquote>\n<p>The width of your selection menu is determined by your longest text element. If you have a long list of options, or you wish to separate your options into logical categories, you can use an &lt;OPTION&gt; tag with an empty VALUE=&#8221;&#8221; followed by several hyphens ( &#8212;&#8212;&#8212;&#8211; ) and this will show up in your list as a separator.<\/p>\n<p>Notice that by default selection menus act as drop-down menus. You can make these into scrolling selection boxes by changing the SIZE attribute from its default setting\u00a0of\u00a01.<\/p>\n<p>Another attribute, MULTIPLE, creates selection menus from which users can choose more than one option, by using CTRL-Click (PC) or Command-Click (Mac).<\/p>\n<p>For example:<\/p>\n<p><code>&lt;form&gt;<br \/>\nI am affiliated with the:&lt;br&gt;<br \/>\n&lt;select name=\"school\" size=\"10\" multiple&gt;<br \/>\n&lt;option value=\"cas\"&gt; College of Arts &amp; Sciences &lt;\/option&gt;<br \/>\n&lt;option value=\"cfa\"&gt; College of Fine Arts &lt;\/option&gt;<br \/>\n&lt;option value=\"com\"&gt; College of Communication &lt;\/option&gt;<br \/>\n&lt;option value=\"sed\"&gt; School of Education &lt;\/option&gt;<br \/>\n&lt;option value=\"eng\"&gt; College of Engineering &lt;\/option&gt;<br \/>\n&lt;option value=\"cgs\"&gt; College of General Studies &lt;\/option&gt;<br \/>\n&lt;option value=\"sar\"&gt; Sargent College &lt;\/option&gt;<br \/>\n&lt;option value=\"smg\"&gt; School of Management &lt;\/option&gt;<br \/>\n&lt;option value=\"met\"&gt; Metropolitan College &lt;\/option&gt;<br \/>\n&lt;option value=\"ssw\"&gt; School of Social Work &lt;\/option&gt;<br \/>\n&lt;option value=\"sth\"&gt; School of Theology &lt;\/option&gt;<br \/>\n&lt;option value=\"law\"&gt; School of Law &lt;\/option&gt;<br \/>\n&lt;option value=\"med\"&gt; School of Medicine &lt;\/option&gt;<br \/>\n&lt;\/select&gt;<br \/>\n&lt;\/form&gt; <\/code><\/p>\n<p>Produces the following:<\/p>\n<blockquote>\n<form> I am affiliated with the:<\/p>\n<p><select multiple=\"multiple\" name=\"school\" size=\"10\"><option value=\"cas\">College of Arts &amp; Sciences <\/option><option value=\"cfa\">College of Fine Arts <\/option><option value=\"com\">College of Communication <\/option><option value=\"sed\">School of Education <\/option><option value=\"eng\">College of Engineering <\/option><option value=\"cgs\">College of General Studies <\/option><option value=\"sar\">Sargent College <\/option><option value=\"smg\">School of Management <\/option><option value=\"met\">Metropolitan College <\/option><option value=\"ssw\">School of Social Work <\/option><option value=\"sth\">School of Theology <\/option><option value=\"law\">School of Law <\/option><option value=\"med\">School of Medicine <\/option><\/select> <\/form>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Use selection menus to allow choices from pre-defined lists of values. This is useful both as a means of standardizing data and as a time saver for the user of the form. A selection menu consists of opening and closing &lt;select&gt; tags containing several &lt;option&gt; tags, corresponding to each possible value of the form field&#8230;.<\/p>\n","protected":false},"author":1685,"featured_media":0,"parent":9805,"menu_order":4,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/9830"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/1685"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=9830"}],"version-history":[{"count":4,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/9830\/revisions"}],"predecessor-version":[{"id":33857,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/9830\/revisions\/33857"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/9805"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=9830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}