如何使用原始 javascript 在下拉框中显示基于 div>a 的子元素文本，如 select>option 结构

Question

每个人。 当我想在 HTML 网站中完成一个下拉框时，我遇到了一些问题，而不使用 select 和选项元素，而不是使用和元素。 主要的 function 由两部分组成，第一个 function是单击下拉框中的第一个元素时，列表的隐藏部分显示出来并再次单击隐藏。 第二个function是选择隐藏列表中的元素时，列表中的元素的文本将替换下拉框上的第一个元素。

我已经使用以下代码完成了第一个 function：

 // javascript codes var searchListBtn = document.getElementById("btn_List"); var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a"); function show(event) { let oevent = event || window.event; if (document.all) { oevent.cancelBubble = true; } else { oevent.stopPropagation(); } // click it to show it, click again to hide it and loop if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") { searchListBtn.style.display = "block"; } else { searchListBtn.style.display = "none"; } } document.onclick = function() { searchListBtn.style.display = "none"; } searchListBtn.onclick = function (event) { let oevent = event || window.event; oevent.stopPropagation(); }

 <;-- html codes --> <html> <body> <div> <div class="ui-search-selected" onclick="show();">A</div> <div class="ui-search-selected-list" id="btn_List"> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> </div> </div> </body> </html>

但是当我做第二部分时，我的想法还不够清晰，无法实现，我搜索了如果我使用 select>option 元素我可以使用 selectedIndex 方法找到列表的索引，但这是一个自定义下拉框，由div>a 结构元素。

我尝试 console.log(a_searchListBtn) 并从控制台显示一个数组，我可以使用 a_searchListBtn[0~3].text 来获取 B/C/D 的值。

我尝试编写如下代码：

a_searchListBtn.onclick = function() {
    console.log("Clicked.")
}

但是控制台中没有任何内容，所以，有没有人可以申请一些帮助，谢谢。

Answer 1

好吧，您正在使用getElementsByTagName("a")获取所有 a 元素。 现在您只需要遍历结果并添加一个单击事件侦听器，它将获取该元素的 innerHTML 并将其放入 ui-search-selected div 的 innerHTML 中。

你不需要索引。 您可以使用event.target访问被点击元素的 innerHTML。 在下面的这个片段中看到它的工作：

 // javascript codes var searchListBtn = document.getElementById("btn_List"); var uiSearchSelected = document.getElementById("ui-search-selected"); var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a"); for (button of a_searchListBtn) { button.addEventListener("click", replace); } function show(event) { let oevent = event || window.event; if (document.all) { oevent.cancelBubble = true; } else { oevent.stopPropagation(); } // click it to show it, click again to hide it and loop if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") { searchListBtn.style.display = "block"; } else { searchListBtn.style.display = "none"; } } document.onclick = function() { searchListBtn.style.display = "none"; } searchListBtn.onclick = function (event) { let oevent = event || window.event; oevent.stopPropagation(); } function replace(event) { if (;event) return. uiSearchSelected.innerHTML = event.target.innerHTML }

 <;-- html codes --> <html> <body> <div> <div id="ui-search-selected" onclick="show();">A</div> <div class="ui-search-selected-list" id="btn_List"> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> </div> </div> </body> </html>

Answer 2

我曾尝试使用此代码来实现此功能，它可以工作。

 // javascript var par_searchListBtn = document.getElementById("btn_list_parent"); var searchListBtn = document.getElementById("btn_List"); var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a"); // console.log(a_searchListBtn.length); // console.log(a_searchListBtn); function show(event) { let oevent = event || window.event; if (document.all) { oevent.cancelBubble = true; } else { oevent.stopPropagation(); } if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") { searchListBtn.style.display = "block"; } else { searchListBtn.style.display = "none"; } } document.onclick = function() { searchListBtn.style.display = "none"; } searchListBtn.onclick = function (event) { let oevent = event || window.event; oevent.stopPropagation(); } for(var i = 0; i < a_searchListBtn.length; i++){ a_searchListBtn[i].onclick = function () { par_searchListBtn.innerHTML = this.innerText; //searchListBtn.style.display = "none"; } }

 <;-- html codes --> <html> <body> <div> <div class="ui-search-selected" id="btn_list_parent" onclick="show();">A</div> <div class="ui-search-selected-list" id="btn_List"> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> </div> </div> </body> </html>

如何使用原始 javascript 在下拉框中显示基于 div>a 的子元素文本，如 select>option 结构

问题描述

2 个解决方案

解决方案1
0 2019-11-11 22:22:12

解决方案2
0 2019-11-18 07:46:34

如何使用原始 javascript 在下拉框中显示基于 div&gt;a 的子元素文本，如 select&gt;option 结构

问题描述

2 个解决方案

解决方案1 0 2019-11-11 22:22:12

解决方案2 0 2019-11-18 07:46:34

如何使用原始 javascript 在下拉框中显示基于 div>a 的子元素文本，如 select>option 结构

解决方案1
0 2019-11-11 22:22:12

解决方案2
0 2019-11-18 07:46:34