jquery select option 获取下拉框值改变时,选择不同值时触发某函数

有一些场景下,需要有这样一个功能:我们选择下拉框的不同值时,触发函数,该函数可能用到了我们选中的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将选中值传到后台,后台可以返回一些数据回来,比如城市的联动选择,可以用该方法做。

jQuery UI是一个基于jQuery的用户界面库,提供了丰富多样的UI组件和交互效果。 在jQuery UI中,我们可以使用下拉框组件来进行可录入的功能实现。下拉框组件允许用户选择一个或多个选项,并且还支持用户输入自定义选项。 要实现可录入下拉框,我们首先需要引入jQuery UI库文件,并在HTML页面中创建一个下拉框元素。 ```html <html> <head> <link rel="stylesheet" href="jquery-ui.css"> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> </head> <body> <select id="myDropdown"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> </body> </html> ``` 然后,我们可以使用jQueryjQuery UI提供的方法来初始化下拉框,并设置可录入功能。 ```javascript $(function() { $("#myDropdown").selectmenu({ create: function(event, ui) { $(this).selectmenu("menuWidget").addClass("overflow"); }, open: function(event, ui) { $(".ui-selectmenu-menu").width($(this).width()); }, select: function(event, ui) { var inputVal = $(".ui-selectmenu-text").val(); $(this).append("<option value='" + inputVal + "'>" + inputVal + "</option>"); $(this).val(inputVal); $(this).selectmenu("refresh"); } }); }); ``` 以上代码中,我们使用了selectmenu()方法初始化下拉框,并设置了三个事件处理函数。create事件是在下拉框创建完成后触发的,我们在这里添加了自定义的CSS类名。 open事件在下拉框打开触发,我们在这里设置了下拉框菜单的宽度与下拉框元素相同。 select事件是在用户选择选项后触发的,我们在这里获取了用户输入的,并将其添加为新的选项。 通过以上代码,我们就可以实现一个可录入的下拉框功能。当用户输入新的选项,该选项会被添加为新的选项,并且可以被选择和显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值