前端學習之select控件的使用1

select控件是表單中的很常見的控件，總結記錄其使用方法：

1、在html中添加表單控件的代碼：

請選擇學歷：
  <select name="xueli" id="xueli">
    <option value="00">未知</option>
    <option value="01">初中</option>
    <option value="02">高中</option>
    <option value="03">中專</option>
    <option value="04">大專</option>
    <option value="05">大學</option>
  </select>

使用<select>標簽定義控件。使用<option>標簽定義選項，value特性表達發送到服務器的值（上例中是00到05），選項的文本（上例中是未知到大學）在操作時顯示。

---

 

2、獲取當前所選項的索引、值和文本，動態增加可選項，刪除可選項，枚舉可選項的代碼

//獲取控件
var xl=document.getElementById("xueli");

//獲取當前所選項目
alert(xl.selectedIndex);
alert(xl.options[xl.selectedIndex].value);
alert(xl.options[xl.selectedIndex].text);

//動態增加可選項目
xl.options.add(new Option("碩士","06"));
xl.options.add(new Option("博士","07"));

//刪除可選項
xl.options.remove(xl.selectedIndex);

//枚舉可選項
for(var p in xl.options){
  console.log(p,xl.options[p].value,xl.options[p].text);
}