每次用户单击表单中的项目时，下拉列表都会读取它的值并将其放入输入字段

Question

请访问页面查看问题https://ibnul.neocities.org/_temporary/index10-prb2.html

在这里，我有一个输入字段，当您单击它时，它会显示一个包含一些列表项的下拉列表。 如果用户从列表中单击一个项目，它应该显示在输入字段中。 如果用户再次单击列表中的另一个项目，它应该再次显示在输入字段中，覆盖前一个项目。 几乎就像一个选择选项标签行为。

我的意思是用户点击的那个项目的文本值应该显示在输入字段中，列表将消失。

谁能告诉我如何编写这个脚本。 请用纯 javascript 显示它。

 var zip_list_show_Btn = document.querySelector('.ziplist-show-btn'); var zip_list_con = document.querySelector('.zip-list-con'); zip_list_show_Btn.addEventListener('focus', showZiplistCon); function showZiplistCon() { zip_list_con.classList.add('show-zip-list-con'); } window.addEventListener("click", function(event) { if (!event.target.matches('.ziplist-show-btn')) { var langDropdowns = document.getElementsByClassName('zip-list-con'); for (var i = 0; i < langDropdowns.length; i++) { var openlangDropdown = langDropdowns[i]; if (openlangDropdown.classList.contains('show-zip-list-con')) { openlangDropdown.classList.remove('show-zip-list-con'); } } } });

 * { margin: 0px; } body { padding: 50px; display: flex; justify-content: center; } .zip-input { width: 100px; padding: 10px 5px 10px 5px; margin: 5px 10px 5px 10px; font-size: 14px; border: 1px solid rgb(179, 179, 179); color: rgb(172, 172, 172); -webkit-appearance: none; } .zip-input::placeholder { color: #acacac; opacity: 1; } .zip-input-ziplist-con { position: relative; display: flex; } .zip-list-con { flex-grow: 2; position: absolute; z-index: 1; top: 53px; right: 0px; width: 160px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: white; border: 0.9px solid lightgray; display: none; } .zip-listitem { cursor: default; padding: 5px 5px 5px 10px; font-size: 14px; color: #acacac; } .zip-listitem:hover { background-color: #228de4; color: white; } .show-zip-list-con { display: block; }

 <div class='zip-input-ziplist-con'> <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'> <div class='zip-list-con'> <p class='zip-listitem'>43748 NewYork</p> <p class='zip-listitem'>43748 Italy</p> <p class='zip-listitem'>43748 French</p> <p class='zip-listitem'>43748 Australia</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> </div> </div>

Answer 1

按照您编写代码的方式，目标是获取单击的文本并将该值放入输入元素中。 因此，只需在您的 eventListener 回调函数中添加此块即可。

if (event.target.matches('.zip-listitem')) {
    var selectedText = event.target.textContent;
    document.getElementsByClassName("zip-input")[0].value = selectedText;
}

Answer 2

请包含 jQuery 并运行此代码$('.zip-listitem').on('click',function (){ $('input').text($(this).text()) })

Answer 3

我认为您正在尝试使用 vanilla JavaScript，因此您有 2 个选项：当您关闭下拉列表时，单击元素或为每个 zip 项目添加一个侦听器以触发验证。

第一个选项：

您验证触发的元素是否是具有.zip-listitem类的元素并关闭下拉列表。

 const zip_list_show_Btn = document.querySelector('.ziplist-show-btn'); const zip_list_con = document.querySelector('.zip-list-con'); zip_list_show_Btn.addEventListener('focus', showZiplistCon); function showZiplistCon() { zip_list_con.classList.add('show-zip-list-con'); } window.addEventListener('click', function(event) { if (!event.target.matches('.ziplist-show-btn')) { var langDropdowns = document.getElementsByClassName('zip-list-con'); for (i = 0; i < langDropdowns.length; i++) { var openlangDropdown = langDropdowns[i]; if (openlangDropdown.classList.contains('show-zip-list-con')) { // Verify that was triggered from an item if (event.target.matches('.zip-listitem')) { // Assaign the text zip_list_show_Btn.value = event.target.innerHTML; } // Close the dropdown openlangDropdown.classList.remove('show-zip-list-con'); } } } });

 * { margin: 0px; } body { padding: 50px; display: flex; justify-content: center; } .zip-input { width: 100px; padding: 10px 5px 10px 5px; margin: 5px 10px 5px 10px; font-size: 14px; border: 1px solid rgb(179, 179, 179); color: rgb(172, 172, 172); -webkit-appearance: none; } .zip-input::placeholder { color: #acacac; opacity: 1; } .zip-input-ziplist-con { position: relative; display: flex; } .zip-list-con { flex-grow: 2; position: absolute; z-index: 1; top: 53px; right: 0px; width: 160px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: white; border: 0.9px solid lightgray; display: none; } .zip-listitem { cursor: default; padding: 5px 5px 5px 10px; font-size: 14px; color: #acacac; } .zip-listitem:hover { background-color: #228de4; color: white; } .show-zip-list-con { display: block; }

 <div class='zip-input-ziplist-con'> <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'> <div class='zip-list-con'> <p class='zip-listitem'>43748 NewYork</p> <p class='zip-listitem'>43748 Italy</p> <p class='zip-listitem'>43748 French</p> <p class='zip-listitem'>43748 Australia</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> </div> </div>

您还可以通过删除window并将其替换为zip_list_con元素来优化它，如下所示：

 const zip_list_show_Btn = document.querySelector('.ziplist-show-btn'); const zip_list_con = document.querySelector('.zip-list-con'); zip_list_show_Btn.addEventListener('focus', showZiplistCon); function showZiplistCon() { zip_list_con.classList.add('show-zip-list-con'); } zip_list_con.addEventListener('click', function(event) { if (!event.target.matches('.ziplist-show-btn')) { if (zip_list_con.classList.contains('show-zip-list-con')) { // Verify that was triggered from an item if (event.target.matches('.zip-listitem')) { // Assaign the text zip_list_show_Btn.value = event.target.innerHTML; } // Close the dropdown zip_list_con.classList.remove('show-zip-list-con'); } } });

 * { margin: 0px; } body { padding: 50px; display: flex; justify-content: center; } .zip-input { width: 100px; padding: 10px 5px 10px 5px; margin: 5px 10px 5px 10px; font-size: 14px; border: 1px solid rgb(179, 179, 179); color: rgb(172, 172, 172); -webkit-appearance: none; } .zip-input::placeholder { color: #acacac; opacity: 1; } .zip-input-ziplist-con { position: relative; display: flex; } .zip-list-con { flex-grow: 2; position: absolute; z-index: 1; top: 53px; right: 0px; width: 160px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: white; border: 0.9px solid lightgray; display: none; } .zip-listitem { cursor: default; padding: 5px 5px 5px 10px; font-size: 14px; color: #acacac; } .zip-listitem:hover { background-color: #228de4; color: white; } .show-zip-list-con { display: block; }

 <div class='zip-input-ziplist-con'> <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'> <div class='zip-list-con'> <p class='zip-listitem'>43748 NewYork</p> <p class='zip-listitem'>43748 Italy</p> <p class='zip-listitem'>43748 French</p> <p class='zip-listitem'>43748 Australia</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> </div> </div>

第二种选择：

您定义项目列表并为每个项目添加一个侦听器。 然后验证下拉列表被调用，使用innerHTML获取所选zip项的值并删除显示下拉列表的类。

此外，您删除window元素侦听器，因为验证将由每个项目的侦听器完成。

 const zip_list_show_Btn = document.querySelector('.ziplist-show-btn'); const zip_list_con = document.querySelector('.zip-list-con'); const items = document.querySelectorAll('.zip-listitem'); for (i = 0; i < items.length; i++) { items[i].addEventListener('click', function(event) { // Assign the value zip_list_show_Btn.value = event.target.innerHTML; let itemParent = event.target.parentElement; // Close the dropdown if (itemParent.classList.contains('show-zip-list-con')) { itemParent.classList.remove('show-zip-list-con'); } }); } zip_list_show_Btn.addEventListener('focus', showZiplistCon); function showZiplistCon() { zip_list_con.classList.add('show-zip-list-con'); }

 * { margin: 0px; } body { padding: 50px; display: flex; justify-content: center; } .zip-input { width: 100px; padding: 10px 5px 10px 5px; margin: 5px 10px 5px 10px; font-size: 14px; border: 1px solid rgb(179, 179, 179); color: rgb(172, 172, 172); -webkit-appearance: none; } .zip-input::placeholder { color: #acacac; opacity: 1; } .zip-input-ziplist-con { position: relative; display: flex; } .zip-list-con { flex-grow: 2; position: absolute; z-index: 1; top: 53px; right: 0px; width: 160px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: white; border: 0.9px solid lightgray; display: none; } .zip-listitem { cursor: default; padding: 5px 5px 5px 10px; font-size: 14px; color: #acacac; } .zip-listitem:hover { background-color: #228de4; color: white; } .show-zip-list-con { display: block; }

 <div class='zip-input-ziplist-con'> <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'> <div class='zip-list-con'> <p class='zip-listitem'>43748 NewYork</p> <p class='zip-listitem'>43748 Italy</p> <p class='zip-listitem'>43748 French</p> <p class='zip-listitem'>43748 Australia</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> </div> </div>

Answer 4

选项1
通过使用 jquery

$('.zip-listitem').on('click',function (){
$('input').text($(this).text())
})

选项 2
使用纯 js，但首先为输入添加一个 id（或者您可以使用类名）

<input id="zip-input" class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>

然后在您的点击事件中添加此代码 listenstner

window.addEventListener("click", function(event) {

  ...

  if (event.target.matches('.zip-listitem')) {
      document.getElementById('zip-input').value = event.target.textContent+'';
  }

});

 var zip_list_show_Btn = document.querySelector('.ziplist-show-btn'); var zip_list_con = document.querySelector('.zip-list-con'); zip_list_show_Btn.addEventListener('focus', showZiplistCon); function showZiplistCon() { zip_list_con.classList.add('show-zip-list-con'); } window.addEventListener("click", function(event) { if (!event.target.matches('.ziplist-show-btn')) { var langDropdowns = document.getElementsByClassName('zip-list-con'); for (var i = 0; i < langDropdowns.length; i++) { var openlangDropdown = langDropdowns[i]; if (openlangDropdown.classList.contains('show-zip-list-con')) { openlangDropdown.classList.remove('show-zip-list-con'); } } } if (event.target.matches('.zip-listitem')) { document.getElementById('zip-input').value = event.target.textContent+''; console.log(event.target.textContent); } });

 * { margin: 0px; } body { padding: 50px; display: flex; justify-content: center; } .zip-input { width: 100px; padding: 10px 5px 10px 5px; margin: 5px 10px 5px 10px; font-size: 14px; border: 1px solid rgb(179, 179, 179); color: rgb(172, 172, 172); -webkit-appearance: none; } .zip-input::placeholder { color: #acacac; opacity: 1; } .zip-input-ziplist-con { position: relative; display: flex; } .zip-list-con { flex-grow: 2; position: absolute; z-index: 1; top: 53px; right: 0px; width: 160px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: white; border: 0.9px solid lightgray; display: none; } .zip-listitem { cursor: default; padding: 5px 5px 5px 10px; font-size: 14px; color: #acacac; } .zip-listitem:hover { background-color: #228de4; color: white; } .show-zip-list-con { display: block; }

 <div class='zip-input-ziplist-con'> <input id="zip-input" class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'> <div class='zip-list-con'> <p class='zip-listitem'>43748 NewYork</p> <p class='zip-listitem'>43748 Italy</p> <p class='zip-listitem'>43748 French</p> <p class='zip-listitem'>43748 Australia</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> <p class='zip-listitem'>43748 something</p> </div> </div>