关于select的用法

1.select的基本属性和方法,参看 1，2 

  selectedIndex:返回或设置下列类表中被选中项的索引； size：下拉列表可见的数目；

  add（newOption，后面的option）：增加一个选项，两个参数均是必须的；  remove（i）：删除索引为i的元素。

2.option的属性和方法

  index：返回下列列表中某个选项的索引位置；selected=true|false：返回某个选项是否被选中

  select.options[i].text:返回某个选项的文本值;select.options[i].value:返回选项i的值

3.添加新的选项的方法

   3.1 通过DOM 

var newOption = document.createElement('option');
newOption.setAttribute('value','option value');
newOption.appendChild(document.createElement('option text'))
selectBox.appendChild(newOption);

3.2 通过add   

var newOption = new Option('option text','option value');
selectBox(newOption,undefined);

4.可添加的下拉列表

   1.直接在下拉列表中添加

    

<div>
	<select id="select" >
		<option ></option>
		<option value="11" selected>北京</option>
		<option value="22">上海</option>
		<option value="33">武汉</option>
	</select> 
</div>

(function(){
    var select = document.getElementById('select');
    select.onkeydown = function(e){
       e = e||window.event;
       if(e.keyCode ===8){
	    this.options[0].text =  this.options[0].text.slice(0,this.options[0].text.length>0?this.options[0].text.length-1:0);
	}else{
	    this.options[0].selected = true;
	    this.options[0].text += String.fromCharCode(e.keyCode);
	}
     }
})()

 

   2.通过文本框添加

   

<div>
	<select id="select" >
		<option value="11">北京</option>
		<option value="22">上海</option>
		<option value="33">武汉</option>
	</select>
	<label for="add">添加</label><input type="text" id="add" />    
        <input type="button" value="添加" id="mybutton" />
</div>

(function(){
	var mybtn = document.getElementById('mybutton');
	mybtn.onclick = function(){
	var select = document.getElementById('select');
	var txt = document.getElementById('add').value;
	var a = new Option(txt,txt);
	select.add(a,select[0]);
    }
})()