深入理解选择框脚本[推荐]

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>