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>"));
}
|
|
