技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> js 操作option

js 操作option

浏览:1648次  出处信息

经常要弄一些联动菜单之类的效果,用js操作option就不可避免了。

一般这种特效需要我们实现两种操作:

  1. 清空option
  2. 根据ajax返回结果,动态创建option

经常要弄一些联动菜单之类的效果,用js操作option就不可避免了。

一般这种特效需要我们实现两种操作:

  1. 清空option
  2. 根据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;
    }
}

这里,大家可以思考一下为何options[0]而不是options[i]

js动态创建option

js创建Option的命令如下:

var newOption = new Option(optionTxt, optionVal);

据此,我们可以将Ajax返回的Json对象循环一下,来动态创建Option

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

建议继续学习:

  1. jQuery 操作option    (阅读:2630)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1