前面的話
選擇框是通過<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);//0 console.log(option.label);//1，IE9-浏覽器返回空字符串'' console.log(option.selected);//true console.log(option.text);//1 console.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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！