JS动态生成 select option代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 有时我们经需要动态的增加select的option选项，下面我把我的工作记录分离给各位， 这里包括了jquery与js两种实现代码。...
|
js版本
| 代码如下 |
复制代码 |
|
// 创建一个 option
var newOption = new Option(str,incomeJson.catId,true);
// 获取到 select 对象
var diarySelect = document.getElementById('diarycat_id');
// 第一种给select添加option方法
diarySelect[diarySelect.length]=newOption;
// 第二种给select添加option方法
diarySelect.options.add(newOption);
// 让新添加的option变成选中状态
diarySelect.value=incomeJson.catId;
|
写成函数
| 代码如下 |
复制代码 |
function ad_changed(obj)
{
id = obj.value;
Ajax.call('adv_auto.php?act=get_id&is_ajax=1', 'parent_id='+id, re_ad_changed, "GET", "JSON");
}
function re_ad_changed(result)
{
child = document.getElementById('ad_id');
child.options.length=0;
for(i = 0; i < result.content.length; i++)
{
child.options.add(new Option());
child.options[i].value = result.content[i].ad_id;
child.options[i].text = result.content[i].ad_name;
}
child.style.display = "";
return ;
}
|
jquery版本
jquery的我们可使用append函数，这个很简单
| 代码如下 |
复制代码 |
|
$("#diarycat_id").append('<option value="'+incomeJson.catId+'" selected="selected">'+str+'</option>');
|
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。
语法
$(selector).append(content)参数 描述
content 必需。规定要插入的内容（可包含 HTML 标签）。 |
