js改变下拉框内容
Posted Marydon
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js改变下拉框内容相关的知识,希望对你有一定的参考价值。
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改变下拉框内容的主要内容,如果未能解决你的问题,请参考以下文章