Jquery下拉框取值

最新推荐文章于 2023-12-08 15:32:39 发布

原创最新推荐文章于 2023-12-08 15:32:39 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 选择框</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script>
	   $(function() {
        $("select").change(function(event) {
			////获取当前选择的下一项的值
            //var obj = $(this).find("option:selected").next();
            //alert("选中项的下一个: 内容"+obj.html()+",值"+obj.val());

			//获取当前选择的下一项的值
            var obj = $(this).find("option:selected");
            alert("选中项的: 内容"+obj.html()+",值"+obj.val());
        });
         
    }) 
	</script>
	
	<style>
		select{width:200px;height:500px;padding:10px;border:4px dashed #ccc;}
		select option{margin:5px;}
		input[type='button']{width:200px;height:35px;margin:10px;border:2px dashed #ebbcbe;}
	</style>
</head>
<body>

<form role="form">
   
   <select id="multi-sel" multiple="multiple">
	<option value="1">萝卜，我的value是1</option>
	<option value="2">青菜，我的value是2</option>
	<option value="3">小葱，我的value是3</option>
	<option value="4">豆腐，我的value是4</option>
   </select>
	
</form>

</body>
</html>