700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery获取下拉菜单列表的值

jQuery获取下拉菜单列表的值

时间:2024-01-11 19:34:44

相关推荐

jQuery获取下拉菜单列表的值

在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值。 在jQuery中,我们通过使用.val()方法获得下拉列表的选定值。.val()方法主要用于获取表单元素的值,例如inputselecttextarea

描述:获取匹配元素集中第一个元素的当前值。

jQuery获取下拉菜单列表选定值

下面是实例分析。

引用jQuery库文件

在HTML代码前面需要引用jQuery库文件,你可以把jQuery库文件下载到本地服务器进行调用,也可以直接使用第三方提供的公共库文件,这里推荐使用百度的jQuery库文件。

<head>

<script src="/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="/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>

/tutorial/js//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="/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();

/mr-wuxiansheng/p/6735023.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。