在表单提交的网页中，我们经常使用下拉菜单列表，这篇文章解释了如何获取下拉列表选择的值。 在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获取下拉菜单列表的值