image.png
add new Option
<meta charset='utf-8'>
<select id='mySelect'>
<option>
</option>
</select>
<button onclick="addOption()"></button>
<script>
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}
</script>
delete all the option
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>ss
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="addOption()"></button>
<script>
function addOption(){
var obj=document.getElementById("mySelect");
obj.length=0;
}
</script>
or
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>ss
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="addOption()"></button>
<script>
function addOption(){
var obj=document.getElementById("mySelect");
obj.options.length=0;
}
</script>
image.png
delete one option
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>ss
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="removeOne()"></button>
<script>
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
</script>
image.png
get option value
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>ss
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="removeOne()"></button>
<script>
function removeOne(){
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
alert(obj[index].value)
}
</script>
get option text
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>sd
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="removeOne()"></button>
<script>
function removeOne(){
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
alert(obj[index].text)
}
</script>
reset option
<meta charset='utf-8'>
<select id='mySelect'>
<option value='ss'>sd
</option>
<option value='pp'>
pp
</option>
</select>
<button onclick="removeOne()"></button>
<script>
function removeOne(){
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
obj[index]=new Option('xx','yy');
}
</script>
make one option can not be selected
<select name="select">
<option>aa</option>
<option disabled="disabled">bb</option>
<option>cc</option>
</select>
make one select cannot be selected
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
image.png
make select a link
<select name="pageselect" onchange="self.location.href=options[selectedIndex].value" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION>
</select>
make multiple select
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
image.png
autofocus
<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
