快捷導(dǎo)航

深入理解選擇框腳本[推薦]

更新時(shí)間：2016年12月13日 14:31:46 作者：小火柴的藍(lán)色理想

選擇框是通過(guò)<select>和<option>元素創(chuàng)建的，又稱為下拉列表框。為了方便與這個(gè)控件交互，除了所有表單字段共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細(xì)介紹選擇框腳本

前面的話

選擇框是通過(guò)<select>和<option>元素創(chuàng)建的，又稱為下拉列表框。為了方便與這個(gè)控件交互，除了所有表單字段共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細(xì)介紹選擇框腳本

<select>

首先介紹關(guān)于<select>元素的相關(guān)屬性

multiple

multiple屬性表示是否允許多項(xiàng)選擇

<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)前選中項(xiàng)決定

1、如果沒(méi)有選中的項(xiàng)，則選擇框的value屬性保存空字符串

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

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

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

[注意]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的選中項(xiàng)的索引，如果沒(méi)有選中項(xiàng)，則值為-1。對(duì)于支持多選的控件，只保存選中項(xiàng)中第一項(xiàng)的索引

<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屬性表示選擇框的可見(jiàn)行數(shù)

<select name="test" id="test">
 <option value="a">1</option>
 <option value="b">2</option>
 <option>3</option>
</select>
<button id="btn1">可見(jiàn)1行</button>
<button id="btn2">可見(jiàn)2行</button>
<button id="btn3">可見(jiàn)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中，每個(gè)<option>元素都有一個(gè)HTMLOptionElement對(duì)象表示。為便于訪問(wèn)數(shù)據(jù)， HTMLOptionElement對(duì)象也定義了一些屬性

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

index

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

label

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

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

selected

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

text

text屬性表示選項(xiàng)的文本

value

value屬性表示選項(xiàng)的值

[注意]在未指定value特性的情況下，IE8會(huì)返回空字符串；而其他瀏覽器返回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>

添加選項(xiàng)

【1】添加選項(xiàng)可以使用DOM的appendChild()或insertBefore()方法

<select name="test" id="test">
 <option>1</option>
 <option>3</option>
</select>
<button id="btn">增加選項(xiàng)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)項(xiàng)(reloption)之前

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

<select name="test" id="test">
 <option>1</option>
 <option>3</option>
</select>
<button id="btn">增加選項(xiàng)2</button>
<script>
btn.onclick = function(){
 var newOption = new Option('2');
 test.add(newOption,1);
}
</script>

移除選項(xiàng)

與添加選項(xiàng)類似，移除選項(xiàng)的方式也有很多種

【1】使用DOM的removeChild()方法

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除選項(xiàng)2</button>
<script>
btn.onclick = function(){
 test.removeChild(test.options[1]);
}
</script>

【2】使用選擇框的remove()方法。這個(gè)方法接受一個(gè)參數(shù)，即要移除選項(xiàng)的索引

[注意]使用該方法的好處是，若不存在被移除選項(xiàng)的索引，不會(huì)報(bào)錯(cuò)，只是靜默失敗

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除選項(xiàng)2</button>
<script>
btn.onclick = function(){
 test.remove(1);
}
</script>

【3】將相應(yīng)選項(xiàng)設(shè)置為null

[注意]該方法同樣不會(huì)報(bào)錯(cuò)

<select name="test" id="test">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
<button id="btn">移除選項(xiàng)2</button>
<script>
btn.onclick = function(){
 test.options[1] = null;
}
</script>

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

您可能感興趣的文章: