按下提交后如何记录引导程序下拉菜单的值？

Question

我的表单有一个下拉菜单和 4 个文本输入框。 提交表单时，我需要将所有值记录在 console.log 中。 到目前为止，文本框没有问题，但我无法记录下拉菜单中选择的数字。 有人可以帮忙提前致谢。

这是我的 html：

  <div class="container-of-forms">
      <div class="dropdown">
        <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          2
          <span class="caret"></span>
        </button>
        <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
      </div>

      <!-- Text Input Boxes -->
      <div class="container-inner">
        <input class="text-input-box" id="choice1" type="text" name="" value="" placeholder="Choice 1"> <br>
        <input class="text-input-box" id="choice2" type="text" name="" value="" placeholder="Choice 2"> <br>
        <input class="text-input-box invisible threeChoices" id="choice3" type="text" name="" value="" placeholder="Choice 3"> <br>
        <input class="text-input-box invisible fourChoices" id="choice4" type="text" name="" value="" placeholder="Choice 4">
      </div>
    </div>

这是javascript：

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  var choice1 = $("#choice1").value;
  var choice2 = $("#choice2").value;
  var choice3 = $("#choice3").value;
  var choice4 = $("#choice4").value;
  var numberOfChoices = $("#dropdownMenu").value;
  console.log(numberOfChoices);}

但它没有打印 numberOfChoices ......请帮忙......谢谢

Answer 1

问题是，我们正在试图访问value一个的button它没有value属性集。

我们可能建议设置value ，但在这种情况下，当您使用第三方控件时，让我们只访问button内的文本：

var numberOfChoices = $("#dropdownMenu").text();

请注意， text()将返回所选节点和所有后代的所有文本，在这种情况下，包括没有内部文本的插入符号span ，因此仅从引导程序下拉列表中返回选定的“值”。