Question

我有一个带有下拉菜单和文本字段的表单。这个想法是，当用户单击“提交”时，他们输入的值将进入下拉菜单。我一直在使用TryIt Editor上w3schools.com之外的代码。

这是我的代码：

<!DOCTYPE html>
<html>

<body>

  <form>
    <select id="mySelect">
      <option>Apple</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>
  </form>
  <br>

  <p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>

  <button type="button" onclick="myFunction()">Insert option</button>

  <script>
    function myFunction() {
      var x = document.getElementById("mySelect");
      var option = document.createElement("option");
      option.text = "Kiwi";
      x.add(option);
    }
  </script>

</body>

</html>

无奈的我回到了TryIt编辑器上的原始代码。感谢您的帮助！

Answer 1

您尝试过这种方法非常简单吗？只需像这样的<input type="text" id="text_box" />一样在html部分添加一个新的text元素，然后使用元素ID来获取值。只需运行代码段，希望对您有所帮助。

function myFunction() {
  var x = document.getElementById("mySelect");
  var input_box = document.getElementById("text_box");
  var option = document.createElement("option");
  option.text = input_box.value;
  x.add(option);
}

<!DOCTYPE html>
<html>
<body>
  <form>
    <select id="mySelect" size="8">
      <option>Apple</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>
  </form>
  <br>
  <input type="text" id="text_box" />
  <p>Click the button to add textbox's text as an option at the end of the dropdown list.</p>

  <button type="button" onclick="myFunction()">Insert option</button>
</body>

</html>

Answer 2

这是我将<option>附加到<select>上的方法。查看代码中的注释。

//reference to your button element
var button = document.querySelector('button');
//add a click listener that calls a handler function
button.addEventListener('click', addOption);

//the handler function below will add an element to the select
function addOption() {
  var option = document.createElement("option");
  option.text = "Kiwi";
  //use "appendChild", not "add"
  document.getElementById('mySelect').appendChild(option);
}

<html>

<body>

  <form>
    <select id="mySelect">
      <option>Apple</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>
  </form>
  <br>

  <p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>

  <button type="button">Insert option</button>

  <script>
  </script>

</body>

</html>

Answer 3

如果您想要一个文本框并让用户在该文本框中输入一个值以添加到下拉列表中，则可以添加几行代码（请参见小提琴中的注释）：

<!DOCTYPE html>
<html>

<body>

  <form>
    <select id="mySelect">
      <option>Apple</option>
      <option>Pear</option>
      <option>Banana</option>
      <option>Orange</option>
    </select>
    
    <input type="text" id="txt" placeholder="fruit"/> <!-- Add textbox for UI -->
  </form>
  <br>

  <p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>

  <button type="button" onclick="myFunction()">Insert option</button>

  <script>
    function myFunction() {
      var x = document.getElementById("mySelect");
      var input = document.getElementById("txt"); // Get the textbox element
      var option = document.createElement("option");
      option.text = input.value; // Get the value in the textbox element
      x.add(option);
      input.value = ""; // Set the text-box back to blank
    }
  </script>

</body>

</html>

Answer 4

<input type="text" id="text_field" />
<button type="button" onclick="myFunction()">Insert option</button>

<script>
    function myFunction() {
        var x = document.getElementById("mySelect");
        var textField = document.getElementById("text_field");
        var option = document.createElement("option");
        option.text = textField.value;
        // option.value = textField.value; // You'll probably need to do this too
        x.add(option);
    }
</script>

Answer 5

如果要使用jQuery版本

$('#mySelect').append($('<option>', {
  value: 1,
  text: 'My option'
}));

希望这对您有所帮助。

如何动态地将<input type =“ text” values =“”添加到=“” a =“” <select =“” />作为<option>？

5 个答案: