有一些场景下,需要有这样一个功能:我们选择下拉框的不同值时,触发函数,该函数可能用到了我们选中的select的value,比如如:需要将该value传给后台。
下面是具体代码:
1. 使用html中select标签,用于作下拉框
html代码如下
<button class="button">添加一个选项4</button>
<select name="myselect" id="myselect">
<option style='display: none'></option>
<option value="opt1">选项1</option>
<option value="opt2">选项2</option>
<option value="opt3">选项3</option>
</select>
前端效果图: 第一个为空白,上面有对应的设置
2.使用jquery获取到下拉框改变。
jquery代码如下
第一个函数是当select值改变时候触发的函数,选中一个新值时,获取当前的值,并使用alert弹出;
第二个函数是点击按钮新增一个option,
window.onload=function(){
$("#myselect").change(function(){
var opt=$("#myselect").val();
alert(opt);
});
$('.button').on('click', function(){
$("#myselect").append("<option value='opt4'>选项4</option>")
});
}
这个代码可以和后台结合使用 ,例如当下拉框值改变时,即选中了某个值,此时触发函数,通过ajax将选中值传到后台,后台可以返回一些数据回来,比如城市的联动选择,可以用该方法做。
版权声明:本文为qq_41986312原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。