时间戳

首页 > 解决方案 > 如何在下拉菜单中获取所选项目的价值？

jquery - 如何在下拉菜单中获取所选项目的价值？

问题描述

我正在尝试将所选下拉项的值推送到数组中，但我使用的 jQuery 命令只会推送值 1，无论选择哪个下拉项。

我一直在尝试使用的命令是：

newFriend.response.push($("#ddi1").val())

或者

newFriend.response.push($("#dropdown-q1").val())

我的代码是：

<div class="input-group mb-3">
        <div class="input-group-prepend">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" id="dropdowns" id="chosen-q1">Make a Selection</button>
            <ul class="dropdown-menu" id="dropdown-q1">
                <li class="dropdown-item" id="ddi1" value="1" selected="selected">1 (Strongly Disagree)</li>
                <li class="dropdown-item" id="ddi1" value="2" selected="selected">2 (Disagree)</li>
                <li class="dropdown-item" id="ddi1" value="3" selected="selected">3 (Neutral)</li>
                <li class="dropdown-item" id="ddi1" value="4" selected="selected">4 (Agree)</li>
                <li class="dropdown-item" id="ddi1" value="5" selected="selected">5 (Strongly Agree)</li>
            </ul>
        </div>
    </div>

标签： jquery

解决方案

您的代码中有各种错误。首先，您选择了所有列表项，并且每个项都具有相同的 id（id 只打算使用一次）。您的按钮上还有两个 id。我建议您为此任务使用一个选项组，如下所示：

$("#dropdown-q1").change(function() {
  var $x = $('#dropdown-q1 :selected').val();
  console.log ($x)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="chosen-q1">Make a Selection</button>
    <br><br>
    <select class="dropdown-menu" id="dropdown-q1">
      <option class="dropdown-item" id="ddi1" value="1" selected="selected">1 (Strongly Disagree)</option>
      <option class="dropdown-item" id="ddi2" value="2">2 (Disagree)</option>
      <option class="dropdown-item" id="ddi2" value="3" >3 (Neutral)</option>
      <option class="dropdown-item" id="ddi4" value="4" >4 (Agree)</option>
      <option class="dropdown-item" id="ddi5" value="5" >5 (Strongly Agree)</option>
    </select>
  </div>
</div>

您可以使用警报，但 console.log 更整洁..

希望这可以帮助

推荐阅读