Question

我正在尝试将所选下拉项的值推入数组，但是无论选择哪个下拉项，我使用的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>

Answer 1

您的代码中存在各种错误。首先，您选择了所有列表项，每个列表项都有相同的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更加整洁。

希望这会有所帮助

Answer 2

.val()适用于input，select和textarea类型，据我所知，它的行为对于<ul>来说是不确定的。

您可以通过更改当前选择器以包括将属性值“ selected”设置为“ selected”的列表项来找到<li>中的哪个项：

$('#dropdown-q1 li[selected="selected"]').attr('value');

我认为您的标记可能并不代表您的实际代码；您示例中的所有项目的“ selected”属性相同。我想你只想要一个。

一旦您选择了一个值（上面的值将返回它找到的第一个），您可以按下该值：

var selectedValue = $('#dropdown-q1 li[selected="selected"]').attr('value');
newFriend.response.push(selectedValue);

这里有一些代码在起作用（观看控制台输出）：

console.log($('#dropdown-q1 li[selected="selected"]').attr('value'));

<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="dropdowns" id="chosen-q1">Make a Selection</button>
            <ul class="dropdown-menu" id="dropdown-q1">
                <li class="dropdown-item" id="ddi1" value="1" selected="">1 (Strongly Disagree)</li>
                <li class="dropdown-item" id="ddi1" value="2" selected="">2 (Disagree)</li>
                <li class="dropdown-item" id="ddi1" value="3" 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="">5 (Strongly Agree)</li>
            </ul>
        </div>
    </div>

Answer 3

您需要的是触发.click()事件（或.change()（如果您使用的是input / select标签）。

下面的示例将触发点击事件并将点击的<li>的值推送到newFriend.response

编辑：

//define your variable globally outside 
var newFriend = {};
 newFriend.response = [];

//push to array on select
$("#dropdown-q1 li").on("click", function(){
//console.log("value: "+this.value);
newFriend.response.push(this.value);
});




$("#submit-button").on("click", function (event) {  event.preventDefault(); 
 newFriend.name = $("#name").val().trim();
 newFriend.photoLink = $("#photo").val().trim();
 console.log(newFriend); 
});

<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="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>
<input id="name" value="Mohamed"/>
<input id="photo" value="http://photoLink/"/>
<button id="submit-button">submit</button>

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

3 个答案: