原生js实现下拉框可输入
js实现下拉框可输入<input id="test" type="text"placeholder="请选择"/><br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>前言<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>众所周知，html默认的下拉框是无法输入值的，然后最新的办法是用datalist和输入框绑定，但是很多浏览器不支持。然后还有很多框架提供的下拉框都是可输入的。但是公司的项目太老了，考虑到依赖性需要使用原生js去实现。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>业务是这样，现在有一个输入框存在，需要在不改变这个输入框id的情况下让这个输入框能实现下拉框的效果。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>代码实现<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>Js代码<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>我编写了一个函数用于接收元素id和下拉框的列表数据，函数内部需要完成下拉框的创建。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>首先获取需要变成下拉框的输入框id，然后创建ul元素，然后为ul元素添加css属性，css代码在文章结尾。通过循环去创建li元素，在循环的内部不仅要创建li元素，还要为每个li设置data-key自定义属性作为下拉框的key。还需要为每个下拉框创建点击事件，也就是选中下拉框某个内容时，将li的内容赋值给input框，然后隐藏下拉框因为已经完成了选中操作。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>hideOtherDropdowns隐藏未使用的下拉框，当我有多个下拉框的时候，点击第一个下拉框，再点击第二个下拉框的时候要让之前的下拉框隐藏，防止多个下拉框同时展开。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>然后还需要为input框添加点击事件，当我点击input框的时候显示下拉列表，还需要为每个document添加点击事件，我点击其他dom的时候下拉框要隐藏，比如其他输入框,页面空白处。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>最后将ul元素添加到input元素后面，并设置为relative定位模式。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>window.addEventListener("DOMContentLoaded", function() {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> var options = [<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { key: "1", value: "选项1" },<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { key: "2", value: "选项2" },<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { key: "3", value: "选项3" },<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { key: "4", value: "选项4" }<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> ];<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> renderDropdown("test", options);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> renderDropdown("test2", options);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>});<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>function renderDropdown(id, options) {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>var input = document.getElementById(id);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>var dropdown = document.createElement("ul");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>dropdown.classList.add("dropdown-options");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>for (var i = 0; i < options.length; i++) {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> var option = document.createElement("li");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> option.textContent = options.value;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> option.setAttribute("data-key", options.key);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> option.addEventListener("click", function() {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> input.value = this.textContent; // 将选中的值赋给 input<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> var selectedKey = this.getAttribute("data-key");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> console.log("Selected key:", selectedKey);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> dropdown.classList.remove("show");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> console.log(input.value)<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> });<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> dropdown.appendChild(option);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>function hideOtherDropdowns() <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>{ <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> var otherDropdowns = document.querySelectorAll(".dropdown-options"); <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> for (var j = 0; j < otherDropdowns.length; j++) <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { if (otherDropdowns !== dropdown)<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> { <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> otherDropdowns.classList.remove("show"); <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> } <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> } <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>} <input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>input.addEventListener("click", function(e) {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> hideOtherDropdowns();<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> //e.stopPropagation()的作用是阻止事件冒泡，使事件只在当前元素上触 发执行，不会继续传播到其他元素上。<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> e.stopPropagation();<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> dropdown.classList.toggle("show");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>});<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>document.addEventListener("click", function() {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> dropdown.classList.remove("show");<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>});<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>input.insertAdjacentElement("afterend", dropdown);<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>input.parentNode.style.position = "relative"; // 设置父元素的定位为相对定位<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}Css代码<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>.test {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>position: relative;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>width: 200px;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>padding: 10px;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>border: 1px solid #ccc;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>cursor: pointer;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>background-color: #fff;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>.dropdown-options {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>position: absolute;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>left: 0;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>width: auto;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>max-height: 200px;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>overflow-y: auto;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>list-style-type: none;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>margin: 0;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>padding: 0;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>background-color: #fff;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>border: 1px solid #ccc;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>border-top: none;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>z-index: 999;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>display: none;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>.show{<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/> display: block;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>.dropdown-options li {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>padding: 10px;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>cursor: pointer;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>.dropdown-options li:hover {<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>background-color: #f2f2f2;<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>}Html代码<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>实现效果<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/><input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>来源:https://www.cnblogs.com/ZYPLJ/archive/2023/10/19/17773476.html<input id="test" type="text"placeholder="请选择"/>
<br/>
<input id="test2" type="text"placeholder="请选择"/>免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]