在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值。 在jQuery中,我们通过使用.val()
方法获得下拉列表的选定值。 .val()
方法主要用于获取表单元素的值,例如input
,select
和textarea
。
描述:获取匹配元素集中第一个元素的当前值。
jQuery获取下拉菜单列表选定值
下面是实例分析。
引用jQuery库文件
在HTML代码前面需要引用jQuery库文件,你可以把jQuery库文件下载到本地服务器进行调用,也可以直接使用第三方提供的公共库文件,这里推荐使用百度的jQuery库文件。
- <head>
<script src="http://apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
HTML
这里我们有一个select
下拉列表控件和一个button
按钮标签,所以我们的HTML如下所示:
- <select id="myDlist">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="btn">Click me</button>
jQuery
这里使用.val()
方法,我们得到下拉列表选定值。
代码1:
- $('#myDlist option:selected').val();
代码2:
- $('#myDlist').val();
上面两种代码都可以获得下拉菜单列表的选定值,不过第2种方法更加简洁。
完整的HTML代码
- <html>
<head>
<script src="http://apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
</br>
<select id="myDlist">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="btn">Click me</button>
<script type="text/javascript">
$("#btn").on('click',function(){
//console.log($('#myDlist option:selected').val());
console.log($('#myDlist').val());
});
</script>
</body>
</html>
http://www.webkaka/tutorial/js/2019/050544/
jquery获取select下拉框的前一个,后一个,第一个,最后一个option对象
$("select option:selected").next(); <select> <option value="1" selected="selected">a</option> <option value="2">b</option> <option value="3">c</option> </select> <script src="http://libs.baidu/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> <script> $(function() { $("select").change(function(event) { var obj = $(this).find("option:selected").next(); alert("选中项的下一个: 内容"+obj.html()+",值"+obj.val()); }); }) </script>
//select 当前当前选中的最后一个 option对象
var aucNum=$("#secOrderNum option:selected").text(); var aucNumLast=$("#secOrderNum option:last-child").text();
//select 当前当前选中的后一个 option对象
aucNum = $("#secOrderNum").find("option:selected").next().text();
//select 当前当前选中的第一个 option对象 var aucNum=$("#secOrderNum option:selected").text(); var aucNumFirst=$("#secOrderNum option:first-child").text(); //select 当前当前选中的前一个 option对象 aucNum = $("#secOrderNum").find("option:selected").prev().text();
https://wwwblogs/mr-wuxiansheng/p/6735023.html
更多推荐
jQuery获取下拉菜单列表的值
发布评论