按下提交后如何記錄引導程序下拉菜單的值？

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 ，因此僅從引導程序下拉列表中返回選定的“值”。