A-A+

js 动态创建清空option值代码

2016年10月13日 web前端设计 暂无评论 阅读 5 views 次

option值其实就是select了,下面我来分别介绍js创建option和jquery操作option的实现程序,有需要学习的朋友可参考参考。

1.清空option

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

js清空option

清空option 不是很难的操作,我们只需要遍历现有option,将其每个子元素都置空即可,代码如下:

  1. function clearOption(selectId){  
  2.     var selectObj = document.getElementById(selectId);  
  3.     for(var i = 0,len = selectObj.options.length; i < len; i++){  
  4.         selectObj.options[0] = null;  
  5.     }  
  6. }  

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

js动态创建option命令如下:

var newOption = new Option(optionTxt, optionVal);

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

//firstOption 为默认首选项,比如说“请选择”,代码如下:

  1. function setSelectOption(selectId, optionList, firstOption, selected)  
  2. {  
  3.     var selectObj = document.getElementById(selectId);       
  4.     var cnt = 0;  
  5.     if(firstOption){  
  6.         selectObj.options[0] = new Option(firstOption,'');  
  7.         cnt++; //xiariboke.com  
  8.     }  
  9.     for(var i = 0,len = optionList.length; i < len; i++){  
  10.         selectObj.options[cnt] = new Option(optionList[i].txt, optionList[i].val);  
  11.         if(selected == optionList[i].val){  
  12.             selectObj.options[cnt].selected = true;  
  13.         }  
  14.         cnt++  
  15.     }  
  16. }  

jquery对option操作

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

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

动态创建option

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

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

给我留言