文本輸入的下拉列表

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 。 單擊按鈕觸發 function 將從輸入中獲取值。創建一個數組來存儲所有文本輸入。 如果數組已經包含通過文本輸入的值，則不要再添加。否則調用 function 進行文本輸入並刪除空格。 然后調用另一個 function 將遍歷此數組，並且在每次迭代期間，它將使用document.createElement創建一個option ，並將 append 本身到 select。

 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 個解決方案

解決方案1
0 2020-06-28 06:22:37

解決方案2
0 2020-06-28 06:35:41

解決方案3
0 2020-06-28 06:49:14

文本輸入的下拉列表

問題描述

3 個解決方案

解決方案1 0 2020-06-28 06:22:37

解決方案2 0 2020-06-28 06:35:41

解決方案3 0 2020-06-28 06:49:14

解決方案1
0 2020-06-28 06:22:37

解決方案2
0 2020-06-28 06:35:41

解決方案3
0 2020-06-28 06:49:14