时间戳

首页 > 解决方案 > 无法获取下拉列表中所选项目的值

javascript - 无法获取下拉列表中所选项目的值

问题描述

我正在努力在下拉列表中获取所选项目的值

$('.submitbutton').on('click', function() {
  var valueofitem = $(this).parent().children('.names :selected').attr('value');
  console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">

  <select name="names1" class="names">
    <option value="1">Car</option>
    <option value="2">Bike</option>
    <option value="3">Train</option>
  </select>

  <div class="submitbutton">
    <button>
        Send                                            
    </button>
  </div>
</div>

当我选择其中一个选项并单击发送时，打印到控制台的值是“未定义”，我似乎无法弄清楚原因。

谢谢你的帮助！

标签： javascript

解决方案

您可以通过.val()在 select 元素上使用来获取所选选项的值（因此无需定位所选选项），如下所示：

$('.submitbutton').on('click', function() {
  var valueofitem = $(this).parent().children('.names').val();
  console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">

  <select name="names1" class="names">
    <option value="1">Car</option>
    <option value="2">Bike</option>
    <option value="3">Train</option>
  </select>

  <div class="submitbutton">
    <button>Send</button>
  </div>
</div>

或者简单地获取.val()类的.names：

$('.submitbutton').on('click', function() {
  var valueofitem = $('.names').val();
  console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">

  <select name="names1" class="names">
    <option value="1">Car</option>
    <option value="2">Bike</option>
    <option value="3">Train</option>
  </select>

  <div class="submitbutton">
    <button>Send</button>
  </div>
</div>

推荐阅读