夏日博客

A-A+

js 动态创建清空option值代码

2016年10月13日 前端设计 暂无评论 阅读 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.net  
  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. }  
标签：

给我留言