HTML select option

HTML select option

select 下拉式選單

<select>     <option value="名城"        >名城            </option>     <option value="新都城"    > 新都城       </option>     <option value="第一城"    > 第一城       </option>     <option value="日出康城" > 日出康城   </option>  </select>

名城 新都城 第一城 日出康城

<style>#selectID {background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px; border-radius:50% 50% 50% 50%; text-align-last: center; outline: none;} #DP {font-size: 20px ;} </style><select id="selectID" onchange="sel1()"> <option value="名城" > 名城 </option> <option value="新都城" > 新都城 </option> <option value="第一城" > 第一城 </option> <option value="康城" > 康城 </option> <option value="瓏門" > 瓏門 </option> <option value="太古城" > 太古城 </option> <option value="嘉湖山莊"> 嘉湖山莊 </option></select><span id="DP">請選擇</span ><br><br> <pre><font size=5>2) 加入 css 美化 select<br />#selectID {background-color: silver;<br /> border: 3px outset #d5d5d5;<br /> color: black; cursor: pointer; font-size: 20px;<br /> width: 150px; border-radius:50% 50% 50% 50%;<br /> text-align-last: center;<br /> outline: none;}<br /></pre> <script>function sel1() { var e = document.getElementById("selectID"); var TxT = "選擇了 : " + e.options[e.selectedIndex].text ; document.getElementById("DP").innerHTML=TxT ; } </script>

00

<!-- <optgroup label="1 to 5"> --><!-- 標簽把相關的選項組合在一起 --><p><span style="font-size:24px"><b>3) ﹤<span style="color:#ff0000">optgroup</span> label="1 to 5"﹥ <br />標簽把相關的選項組合在一起</b></span></p> <select><optgroup label="1 to 3"> <option>11111</option> <option>22222</option> <option>33333</option></optgroup> <optgroup label="4 to 6"> <option>44444</option> <option>55555</option> <option>66666</option></optgroup> <optgroup label="7 to 9"> <option>77777</option> <option>88888</option> <option>99999</option></optgroup></select><br><br>

00

<style>#selectID {background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;} #DP {font-size: 20px ;} </style> <span style="font-size:24px;color:blue"><b>4) select 加入 multiple="multiple" <br>可選擇多於一個</b></span><br><br> <select id="selectID" onchange="sel1()" multiple="multiple" size="7"> <option value="名城" > 名城 </option> <option value="新都城" > 新都城 </option> <option value="第一城" > 第一城 </option> <option value="康城" > 康城 </option> <option value="瓏門" > 瓏門 </option> <option value="太古城" > 太古城 </option> <option value="嘉湖山莊"> 嘉湖山莊 </option></select><span ><i>按住 Ctrl key 可選擇多於一個</i></span><span id="DP">請選擇</span > <script>function sel1() { var e = document.getElementById("selectID"); i=0; var TxT = "選擇了 : " ; for (i=0; i< e.options.length; i++) { if (e.options[i].selected) { TxT += e.options[i].value + " | "; } } document.getElementById("DP").innerHTML=TxT ; } </script>

00

<style>/** 加入 css 美化外select ****/ /** onchange="sel1()" 選擇後執行sel1 函数 ***/ /** onchange="this.selectedIndex=0" 擇後返回原位 ***/ #selectID {background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;} #DP {font-size: 20px ;} </style> <span style="font-size:24px;color:blue">5) onchange = "sel1()" 選擇後執行sel1 函数 <br> onchange = "this.selectedIndex=0" 擇後返回原位<br> ﹤option style="display:none;"﹥ 不顯示選項<br> </span><br><br> <select id="selectID" onchange="sel1();this.selectedIndex=0"> <option style="display:none;" > 請選擇 </option> <option value="新都城" > 新都城 </option> <option value="第一城" > 第一城 </option> <option value="康城" > 康城 </option> <option value="瓏門" > 瓏門 </option> <option value="太古城" > 太古城 </option> <option value="嘉湖山莊"> 嘉湖山莊 </option></select> <div id="DP">請選擇</div> <script>function sel1() { var e = document.getElementById("selectID"); var TxT = "選擇了 : " + e.options[e.selectedIndex].text ; document.getElementById("DP").innerHTML=TxT ; } </script>

00

<!-- 新增/移除 select 內的 option --><!-- [SELECT元素物件].add(option,位置) option.text/value 新元素 --><!-- [SELECT元素物件].remove( 位置 )，位置需要移除第幾個 option --> <table border="1"><tbody><tr><td><input onclick="FAT16341143()" type="button" value="Add" /><input onclick="FLT16341143()" type="button" value="Less" /><br><select id="selID" size="6" style="width: 50px;"> <option value="1" > 1 </option> <option value="2" > 2 </option> <option value="3" > 3 </option> <option value="4" > 4 </option> <option value="5" > 5 </option> <option value="6" > 6 </option></select><br><input onclick="FAB16341143()" type="button" value="Add" /><input onclick="FLB16341143()" type="button" value="Less" /> </td><td><pre style="font-size: 20px ;"><br /> 6) var OPT = document.createElement("option")<br /> OPT .text = "xxx text"<br /> OPT .value = "xxx value"<br /><br /> [SELECT id].add(OPT , index) [option +]<br /> [SELECT id].remove(index) [option -]<br /> [SELECT id].length = 0 [remove all]<br /><br /></pre></td></tr></tbody></table> <script> var x = document.getElementById("selID"); /* -----------TOP +1 x.add(option,0) ---------*/ function FAT16341143() { var option = document.createElement("option"); var tt = x.options[0].text ; var vv = x.options[0].value ; option.text = parseInt(tt)-1; option.value = parseInt(vv)-1 x.add(option,0); LLsize(); } /* ----------TOP -1 x.remove(0) -------------*/ function FLT16341143() { if (x.length > 1){ x.remove(0); LLsize();} } /* ---------bottom +1 x.add(option)----------*/ function FAB16341143() { var option = document.createElement("option"); var tt = x.options[x.length-1].text ; var vv = x.options[x.length-1].value ; option.text = parseInt(tt)+1 ; option.value = parseInt(vv)+1 ; x.add(option); LLsize(); } /* ------bottom -1 x.remove(x.length-1)------*/ function FLB16341143() { if (x.length > 1){ x.remove(x.length-1); LLsize(); } } /* --------size length x.size=x.length----------------*/ function LLsize(){ x.size=x.length; } </script>

00

#html document.getElementById 元素列表#script document.getElementById 元素列表