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); ???????????????????????????};相关推荐：
类似文章
js改变下拉框内容
原文地址：https://www.cnblogs.com/Marydon20170307/p/8746721.html