js改变下拉框内容
CreateTime--2018年4月8日18:47:38
Author:Marydon
适用场景:通常情况下,级联菜单、通过ajax异步获取后台数据改写下拉框内容会有这种需求
实现方式:通过jQuery实现
HTML片段
编程语言:
<select id="test">
<option value="">--请选择--</option>
<option value="1">javascript</option>
<option value="2">jquery</option>
</select>
<input type="button" value="点击改变下拉选项" onclick="changeOptionContent3();"/>
js代码
/**
* 方式一:推荐使用
*/
function changeOptionContent() {
var optionTags = '<option value="3">java</option>'
+'<option value="4">oracle</option>';
// 将下拉框中除了第一个选项,全部移除
$('#test option:gt(0)').remove();
// 为下拉框拼接子标签
$('#test').append(optionTags);
};
/**
* 方式二:使用html()
*/
function changeOptionContent2() {
// 初始化
var optionTags = '<option value="">--请选择--</option>';
// 标签内容
optionTags += '<option value="3">java</option>'
+'<option value="4">oracle</option>'; // 重写下拉框的内容
$('#test').html(optionTags);
};
/**
* 方式三:使用empty()
*/
function changeOptionContent3() {
// 1.置空
$('#test').empty();
// 2.拼接
var optionTags = '<option value="">--请选择--</option>';
$('#test').append(optionTags);
optionTags = '<option value="3">java</option>'
+'<option value="4">oracle</option>';
$('#test').append(optionTags);
};