使用 HTML, CSS 和 JavaScript 显示下拉列表中选中的项目

<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()">
  </div>
</div>

#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;
}

.dropdown {
  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;
  cursor: pointer; /* 添加鼠标悬停样式 */
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}

.dropdown-content > .dropdown-option{
  cursor: pointer;
}

.dropdown-content > .selectedOption{
  background-color: darkgray !important;
}

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" }
  ];

  var dropdown = document.getElementById("myDropdown");
  dropdown.classList.toggle("show");
  dropdown.innerHTML = ''; // Clear existing content

  // Add search input
  let input = document.createElement('input');
  input.type = 'text';
  input.placeholder = 'Search...';
  input.id = 'myInput';
  input.onkeyup = filterFunction;
  dropdown.appendChild(input);

  // Populate dropdown with country options
  for (var i = 0; i < country.length; i++) {
    const countryOption = document.createElement("a");
    countryOption.setAttribute('value', country[i]['ID']);
    countryOption.innerText = country[i]['Country_Name'];
    countryOption.classList.add('dropdown-option');
    countryOption.addEventListener('click', countryOnClick);
    dropdown.appendChild(countryOption);
  }
}

function countryOnClick(event) {
  const clickedOption = event.target;
  const countryID = clickedOption.getAttribute('value');
  const countryName = clickedOption.innerText;

  // Remove selectedOption class from all options
  clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o, i) => {
    o.classList.remove('selectedOption');
  });

  // Add selectedOption class to the selected option
  clickedOption.classList.add('selectedOption');

  // Log selected country details
  console.log(`${countryID} - ${countryName}`);
  console.log(getSelectedOption());

  // You can further update the UI to display the selected country
  // For example, update a <span> element with id 'selectedCountry'
  // document.getElementById('selectedCountry').innerText = countryName;
}

function getSelectedOption() {
  return document.querySelector('#myDropdown > .dropdown-option.selectedOption');
}


function filterFunction() {
  var input, filter, 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";
    }
  }
}