✍ 📁 🙈 🙉 🙊 : HTML select option

HTML select option

select 下拉式選單
<select> <option value="名城" >名城 </option> <option value="新都城" > 新都城 </option> <option value="第一城" > 第一城 </option> <option value="日出康城" > 日出康城 </option> </select>

#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
#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;}
</pre>

<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 >

document.getElementById("DP").innerHTML=TxT  ;
}
</script>

#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>

</td><td><pre style="font-size: 20px ;">
  6)  var OPT = document.createElement("option")
          OPT .text = "xxx text"
          OPT .value  = "xxx value"

[SELECT id].add(OPT , index) [option +]
    [SELECT id].remove(index)    [option -]
    [SELECT id].length = 0       [remove all]

</pre></td></tr></tbody></table>

/* -----------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>

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單