网站地图    收藏   

主页 > 前端 > javascript >

js 动态创建清空option值代码

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] option值其实就是select了,下面我来分别介绍js创建option和jquery操作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命令如下:

 代码如下 复制代码
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++
    }
}

jquery对option操作

清空select下所有option的方法,使用下面语句即可:

 代码如下 复制代码

$('#selectId').empty().append( $("<option>这里放默认值</option>") );

动态创建option

之前的做法,是借用其中间函数,来实现遍历Ajax返回的json对象。并使用new Option来创建option.现在我使用如下方法处理

 代码如下 复制代码

for(var i = 0,len = jsondata.length; i<len; i++){
      $('#selectId').append($("<option value='"+jsondata[i].val+"'>"+jsondata[i].txt+"</option>"));
}

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论