前面的話
選擇框是通過<select>和<option>元素創建的，又稱為下拉列表框。為了方便與這個控件交互，除了所有表單字段共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細介紹選擇框腳本
<select>
首先介紹關于<select>元素的相關屬性
multiple
multiple屬性表示是否允許多項選擇
<select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option></select><button id="btn">是否多選</button><script>btn.onclick = function(){ test.multiple = !test.multiple;} </script>type
選擇框的type屬性有兩種，一種是'select-one'，表示單選；另一種是'select-multiple'，表示多選
<select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option></select><button id="btn">是否多選</button><div id="result"></div><script>btn.onclick = function(){ test.multiple = !test.multiple; result.innerHTML = test.type;} </script>value
選擇框的value屬性由當前選中項決定
1、如果沒有選中的項，則選擇框的value屬性保存空字符串
2、如果有一個選中項，而且該項的value特性已經在HTML中指定，則選擇框的value屬性等于選中項的value特性。即使value特性的值是空字符串，也同樣遵循此條規則
3、如果有一個選中項，但該項的value特性在HTML中未指定，則選擇框的value屬性等于該項的文本
4、如果有多個選中項，則選擇框的value屬性將依據前兩條規則取得第一個選中項的值
[注意]IE8-瀏覽器只支持value屬性的值，不支持選擇的文本值
<select name="test" id="test"> <option value="a">1</option> <option value="b">2</option> <option>3</option></select><button id="btn1">是否多選</button><button id="btn2">獲取value值</button><div id="result"></div><script>btn1.onclick = function(){ test.multiple = !test.multiple;} btn2.onclick = function(){ result.innerHTML = test.value;}</script>selectedIndex
selectedIndex屬性返回基于0的選中項的索引，如果沒有選中項，則值為-1。對于支持多選的控件，只保存選中項中第一項的索引
<select name="test" id="test"> <option value="a">1</option> <option value="b">2</option> <option>3</option></select><button id="btn1">是否多選</button><button id="btn2">獲取索引</button><div id="result"></div><script>btn1.onclick = function(){ test.multiple = !test.multiple;} btn2.onclick = function(){ result.innerHTML = test.selectedIndex;}</script>size
size屬性表示選擇框的可見行數
<select name="test" id="test"> <option value="a">1</option> <option value="b">2</option> <option>3</option></select><button id="btn1">可見1行</button><button id="btn2">可見2行</button><button id="btn3">可見3行</button><div id="result"></div><script>btn1.onclick = function(){ test.size = 1;} btn2.onclick = function(){ test.size = 2;}btn3.onclick = function(){ test.size = 3;}</script>options
options屬性表示控件中所有的<option>元素
<select name="test" id="test"> <option value="a">1</option> <option value="b">2</option> <option>3</option></select><script>//[option, option, option, selectedIndex: 0]console.log(test.options)</script>
<option>
在DOM中，每個<option>元素都有一個HTMLOptionElement對象表示。為便于訪問數據， HTMLOptionElement對象也定義了一些屬性
[注意]IE瀏覽器不支持為<option>元素設置display:none
index
index屬性表示當前選項在options集合中的索引
label
label屬性表示當前選項的標簽
[注意]IE9-瀏覽器不支持
selected
selected屬性表示當前選項是否被選中。將這個屬性設置為true可以選中當前選項
text
text屬性表示選項的文本
value
value屬性表示選項的值
[注意]在未指定value特性的情況下，IE8會返回空字符串；而其他瀏覽器返回text屬性的值
<select name="test" id="test"> <option value="a" selected>1</option> <option value="b">2</option> <option>3</option></select><script>var option = test.options[0];console.log(option.index);//0console.log(option.label);//1，IE9-瀏覽器返回空字符串''console.log(option.selected);//trueconsole.log(option.text);//1console.log(option.value);//a</script>
添加選項
【1】添加選項可以使用DOM的appendChild()或insertBefore()方法
<select name="test" id="test"> <option>1</option> <option>3</option></select><button id="btn">增加選項2</button><script>btn.onclick = function(){ var newOption = document.createElement('option'); newOption.innerHTML = 2; test.insertBefore(newOption,test.options[1]);}</script>【2】可以使用選擇框的add()方法，add(newoption,reloption)方法向控件中插入新<option>元素，其位置在相關項(reloption)之前
使用Option構造函數來創建新選項，接受兩個參數：文本(text)和值(value)，第二個參數可選
<select name="test" id="test"> <option>1</option> <option>3</option></select><button id="btn">增加選項2</button><script>btn.onclick = function(){ var newOption = new Option('2'); test.add(newOption,1);}</script>移除選項
與添加選項類似，移除選項的方式也有很多種
【1】使用DOM的removeChild()方法
<select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option></select><button id="btn">移除選項2</button><script>btn.onclick = function(){ test.removeChild(test.options[1]);}</script>【2】使用選擇框的remove()方法。這個方法接受一個參數，即要移除選項的索引
[注意]使用該方法的好處是，若不存在被移除選項的索引，不會報錯，只是靜默失敗
<select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option></select><button id="btn">移除選項2</button><script>btn.onclick = function(){ test.remove(1);}</script>【3】將相應選項設置為null
[注意]該方法同樣不會報錯
<select name="test" id="test"> <option>1</option> <option>2</option> <option>3</option></select><button id="btn">移除選項2</button><script>btn.onclick = function(){ test.options[1] = null;}</script>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
