您的位置：首页 > Web前端 > JavaScript

JavaScript 控制 Select 下拉列表

2009-09-03 00:53 666 查看

<html>
<select id="mysel" name="mysel">
<option value="1">1 xxxxxxxxxx</option>
<option value="2">2 yyyyyyyyyy</option>
<option value="3">3 zzzzzzzzzz</option>
<option value="4">4 wwwwwwwwww</option>
</select>
<button onclick="setSel(3)">选中第3项</button>
<button onclick="clearSel()">清空选择框</button>
<button onclick="fillSel()">填充选择框</button>
<button onclick="removeSel()">移除第一项</button>
<button onclick="editSel()">修改第一项</button>

<mce:script type="text/javascript"><!--
//选中项
function setSel(str){
with(document.all){
for(var i=0;i<mysel.options.length;i++){
if (mysel.options[i].value==str){
mysel.selectedIndex=i;
break;
}
}
}
}

//清空选择
function clearSel(){
with(document.all){
mysel.options.length=0;
}
}

//重新填充
function fillSel(){
with(document.all){
mysel.options.length=0;
mysel.options[0] = new Option("1 xxxxxxxxxx","1");
mysel.options[1] = new Option("2 yyyyyyyyyy","2");
mysel.options[2] = new Option("3 zzzzzzzzzz","3");
mysel.options[3] = new Option("4 wwwwwwwwww","4");
mysel.options[4] = new Option("5 aaaaaaaaaa","5");

mysel.selectedIndex = 4;
}
}

//移除项
function removeSel(){
with(document.all){
mysel.remove(0);
if (mysel.options.length>0){
mysel.selectedIndex=0;
}
}
}
//修改项
function editSel(){
with(document.all){
if (mysel.options.length>0){
mysel.options[0] = new Option("这是新的第一项","new Value")
mysel.selectedIndex=0;
}
}
}
// --></mce:script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航