2010八月17
js 操作option
经常要弄一些联动菜单之类的效果，用js操作option就不可避免了。
一般这种特效需要我们实现两种操作：
- 清空option
- 根据ajax返回结果，动态创建option
js清空option
清空option 不是很难的操作。我们只需要遍历现有option，将其每个子元素都置空即可。
function clearOption(selectId){
var selectObj = document.getElementById(selectId);
for(var i = 0,len = selectObj.options.length; i < len; i++){
selectObj.options[0] = null;
}
}
var selectObj = document.getElementById(selectId);
for(var i = 0,len = selectObj.options.length; i < len; i++){
selectObj.options[0] = null;
}
}
这里，大家可以思考一下为何options[0]而不是options[i]
js动态创建option
js创建Option的命令如下：
var newOption = new Option(optionTxt, optionVal);
据此，我们可以将Ajax返回的Json对象循环一下，来动态创建Option
//firstOption 为默认首选项，比如说“请选择”
function setSelectOption(selectId, optionList, firstOption, selected)
{
var selectObj = document.getElementById(selectId);
var cnt = 0;
if(firstOption){
selectObj.options[0] = new Option(firstOption,'');
cnt++;
}
for(var i = 0,len = optionList.length; i < len; i++){
selectObj.options[cnt] = new Option(optionList[i].txt, optionList[i].val);
if(selected == optionList[i].val){
selectObj.options[cnt].selected = true;
}
cnt++
}
}
function setSelectOption(selectId, optionList, firstOption, selected)
{
var selectObj = document.getElementById(selectId);
var cnt = 0;
if(firstOption){
selectObj.options[0] = new Option(firstOption,'');
cnt++;
}
for(var i = 0,len = optionList.length; i < len; i++){
selectObj.options[cnt] = new Option(optionList[i].txt, optionList[i].val);
if(selected == optionList[i].val){
selectObj.options[cnt].selected = true;
}
cnt++
}
}
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/08/17/1856/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
搞完css了~~开始学习js了~呵呵
[回复]
昨天搞了一下这个，不过我不会写函数啥的，直接用在鼠标动作里
[回复]
@要饭的
忽然感觉应该收集一下这些小代码了。。自己来回去找，挺麻烦的。
[回复]
@老饕
哪搞完了，CSS还差好多呢。。。
[回复]
function clearOption(selectId){
var selectObj = document.getElementById(selectId);
for(var i = 0,len = selectObj.options.length; i < len; i++){
selectObj.options[0] = null;
}
}
是0不是i,这个好理解，不好理解的是，为什么不用selectObj.options.length=0;
而用一个循环
[回复]
@xiaokui
确实，指为0可能更好理解一些。呵呵。
[回复]
谢谢分享，学习了。
[回复]
哥最近研究貌似一直在研究js啊，不错
[回复]
js是门学问，我也在研究
[回复]
为什么要循环清空option, 直接赋值不就好了？
$(“#selectobjID”).html();
[回复]
@lxnan
我没有使用jQ。谢谢。
[回复]
一直用JQ的飘，自己研究可以，写项目自己写的代码是要被骂到死无葬身之地的。
[回复]
用0的飘过@xiaokui
[回复]