如何使用 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>