Question

我什至不知道如何开始，这就是为什么我不添加代码。但是我需要使用用户之前输入的名称创建一个下拉名称，并且我知道如何创建一个下拉列表，但是我不知道如何使用户输入的名称作为下拉列表中的元素。谢谢

Answer 1

如果将名称存储在数组中，则可以尝试类似

let dropdown = document.querySelector('select')
let names = ['john', 'alex', 'alissa', 'sam']

names.forEach(name => {
  let option = document.createElement('option')
  option.value = name
  option.innerText = name
  dropdown.append(option)
})

<select></select>

Answer 2

创建文本input，button和select。点击按钮触发一个函数，该函数将从输入中获取值。创建一个数组来存储所有文本输入。如果数组已经包含通过text input输入的值，则不要再次添加它，否则调用该函数进行文本输入并删除空格。然后调用另一个函数，该函数将遍历此数组，并且在每次迭代期间，它将使用option创建一个document.createElement并将自身附加到选择中。

let optionArray = [];

function addToOption() {
  const inputValue = document.getElementById("userName").value.trim();
  if (optionArray.indexOf(inputValue) === -1) {
    optionArray.push(inputValue)
  }
  addToSelect();
}

function addToSelect() {
  if (optionArray.length === 0) {
    return;
  }
  const selectBox = document.getElementById('selectOption');
  selectBox.innerHTML = '';
  optionArray.forEach((item) => {
    const elem = document.createElement('option');
    const optionText = document.createTextNode(item);
    elem.appendChild(optionText);
    elem.id = optionText;
    selectBox.appendChild(elem)
  })
}

<input type="text" id="userName">
<button type="button" onClick="addToOption()">Add</button>
<select id="selectOption"></select>

Answer 3

这是Jquery代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Update list item</title>
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous">
      </script>
    
</head>
<body>

    <input type="text" name="listitem" id="content">
    <button id="updateBtn">Add to list</button>
    <hr>
    <select id="listelement">
        <option>test option</option>
    </select>
        

    <script type="text/javascript">
        $(document).ready(function(){
            $("#updateBtn").click(function(){
                var content=$("#content").val();
                var listitem='<option>'+content+'</option>';
                $("#listelement").append(listitem); 
        });
});
    </script>
</body>
</html>

文本输入的下拉列表

3 个答案: