如何使用 html、css 和 javascript 從下拉列表中顯示所選項目

Question

我有一個下拉列表，其中正在從 JSON 數組中獲取國家/地區列表。 下拉列表來自動態 json 對象。 我已在該下拉列表中應用搜索。 我正在嘗試顯示所選項目，但我無法做到。 我希望當我從列表中選擇一個特定的國家時，它會顯示出來。

 function myFunction() { var country = [{ "ID": "001", "Country_Name": "India" }, { "ID": "002", "Country_Name": "Australia" }, { "ID": "003", "Country_Name": "Austria" }, { "ID": "004", "Country_Name": "China" }, { "ID": "005", "Country_Name": "Bangladesh" } ]; document.getElementById("myDropdown").classList.toggle("show"); var ele = document.getElementById("myDropdown"); for (var i = 0; i <= country.length; i++) { ele.innerHTML = ele.innerHTML + '<a value="' + country[i]['ID'] + '">' + country[i] ['Country_Name'] + '</a>'; } } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }

 #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus { outline: 3px solid #ddd; } position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .show { display: block; }

 <div class="dropdown"> <button onclick="myFunction()" class "dropbtn"> Dropdown </button> <div id="myDropdown" class="dropdown-content" onclick="show()"> <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()"> <a value=""></a> </div> </div>

Answer 1

您的代碼有幾個錯誤：

• <div id="myDropdown" class="dropdown-content" onclick="show()">但未定義 show() 所以我刪除了 onclick 處理程序；
• for (i = 0; i <= a.length; i++)應該改為i < a.length

另外，我更好地重構了構建錨元素的部分，以便使用document.createElement()創建這些元素，而不是使用innerHTML策略。 這樣就有機會引用該對象並為每個選項添加一個單擊事件處理程序，這樣當您單擊一個國家/地區時，它的名稱就會顯示在控制台上。

國家選項點擊處理程序被定義為countryOnClick()函數，到目前為止它只是在控制台上顯示點擊的選項數據。 您可以隨意更改它，以執行您更喜歡的操作。

每個選項都將具有類dropdown-option ，並且選擇選項時，將具有類optionSelected 。 要查詢文檔並知道選擇了哪個選項，這是 css 選擇器：

document.querySelector('#myDropdown > .dropdown-option.selectedOption')

 function myFunction() { var country = [ { "ID": "001", "Country_Name": "India" }, { "ID": "002", "Country_Name": "Australia" }, { "ID": "003", "Country_Name": "Austria" }, { "ID": "004", "Country_Name": "China" }, { "ID": "005", "Country_Name": "Bangladesh" } ]; document.getElementById("myDropdown").classList.toggle("show"); var ele = document.getElementById("myDropdown"); //for each country in the country array for (var i = 0; i < country.length; i++) { //creates an anchor element const countryOption = document.createElement("a"); //holding the country ID in its value attribute countryOption.setAttribute('value', country[i]['ID']); //and the country Name as its innerText countryOption.innerText = country[i]['Country_Name']; //adds the class dropdown-option to the option element countryOption.classList.add('dropdown-option'); //binds the countryOnClick function defined below as its click event handler countryOption.addEventListener('click', countryOnClick); //appends the new anchor to the dropdown element ele.appendChild(countryOption); } } //click event handler for the dropdown options function countryOnClick(event){ //fetch country properties from the element triggering the event const clickedOption = event.target; const countryID = clickedOption.getAttribute('value'); const countryName = clickedOption.innerText; //removes the selectedOption class to every option in the dropdown clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o,i)=>{ o.classList.remove('selectedOption'); }); //adds the selectedOption class to the selected option element clickedOption.classList.add('selectedOption'); //show those data on console console.log(`${countryID} - ${countryName}`); console.log( getSelectedOption() ); } function getSelectedOption(){ return document.querySelector('#myDropdown > .dropdown-option.selectedOption'); } //gets called when the filter input changes, and it filters the dropdown options list function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }

 #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus { outline: 3px solid #ddd; } position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .show { display: block; } .dropdown-content > .dropdown-option{ cursor: pointer; } .dropdown-content > .selectedOption{ background-color: darkgray !important; }

 <div class="dropdown"> <button onclick="myFunction()" class "dropbtn"> Dropdown </button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()"> <a value=""></a> </div> </div>