<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屬性由當(dāng)前選中項決定

1、如果沒有選中的項，則選擇框的value屬性保存空字符串

2、如果有一個選中項，而且該項的value特性已經(jīng)在HTML中指定，則選擇框的value屬性等于選中項的value特性。即使value特性的值是空字符串，也同樣遵循此條規(guī)則

3、如果有一個選中項，但該項的value特性在HTML中未指定，則選擇框的value屬性等于該項的文本

4、如果有多個選中項，則選擇框的value屬性將依據(jù)前兩條規(guī)則取得第一個選中項的值

[注意]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屬性表示選擇框的可見行數(shù)

<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對象表示。為便于訪問數(shù)據(jù)， HTMLOptionElement對象也定義了一些屬性

[注意]IE瀏覽器不支持為<option>元素設(shè)置display:none

index

index屬性表示當(dāng)前選項在options集合中的索引

label

label屬性表示當(dāng)前選項的標(biāo)簽

[注意]IE9-瀏覽器不支持

selected

selected屬性表示當(dāng)前選項是否被選中。將這個屬性設(shè)置為true可以選中當(dāng)前選項

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>元素，其位置在相關(guān)項(reloption)之前

使用Option構(gòu)造函數(shù)來創(chuàng)建新選項，接受兩個參數(shù)：文本(text)和值(value)，第二個參數(shù)可選

<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()方法。這個方法接受一個參數(shù)，即要移除選項的索引

[注意]使用該方法的好處是，若不存在被移除選項的索引，不會報錯，只是靜默失敗

<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】將相應(yīng)選項設(shè)置為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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: