原生JS多选选择框,动态渲染数据添加选择框,label标题联动

文章介绍了如何使用HTML和JavaScript创建一个具有动态选项的多选下拉框,同时实现模糊搜索功能。通过JavaScript操作DOM元素,包括创建checkbox、处理鼠标事件和模糊查询来达到用户交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、html代码

 <div style="width:40%;height:28px;overflow:hidden;">
                                	<input type="text" id="selectButton" onclick="myclick();" readonly="true" style="width:100%;height:28px;">
                                </div>
                                <div id="fuzzysearchdiv" style="display:none;width:50%;z-index:3;position:absolute;height:20px;"
                                		onMouseOver="mousein()" onMouseOut="mouseout()">
                                	<input placeholder="过滤关键字" type="text" id="fuzzysearch" onkeyup="myfuzzysearch()" style="width:100%;"/>
                                </div>
                                <div id="selectdiv" style="margin-top:30px;display:none;border:1px solid #A9A9A9;width:50%;;z-index:2;position:absolute;overflow-y :scroll;height:180px;background-color:white;"
                                		onMouseOver="mousein()" onMouseOut="mouseout()">
                                	<br>
                                 
                                </div>
                                <br>
                                <!-- <span style="position:absolute;top:1%;left:50%" onclick="mysubmit();">提交</span> -->
                                <input style="position:absolute;top:1%;left:62%;margin-left:1%" type="button" value="提交" onclick="mysubmit();"/>
                                <input id="backButton" style="position:absolute;top:1%;left:70%;margin-left:1%" type="button" value="返回" onclick="myback();"/>

2、js代码

​
  //下拉框的数据
	// 这个数组就是存放要遍历的数据数组
    var initlist = [ 
        {code: 'A09.900', name: '胃肠炎'},
        {code: 'A09.900', name: '胃肠炎和结肠炎'}
    ];//
	
	//多选下拉框所在的div
	var selecteddiv = document.getElementById("selectdiv");
	
	//鼠标是否在【多选下拉框div】上面(如果在div上面,需要控制鼠标的点击事件,不让div隐藏;否则要让该div隐藏)
	var indiv = false;
	
	//模糊查询input
	var fuzzysearchinput = document.getElementById("fuzzysearch");
	
	//选中的股票代码(需要传到后台的参数)
	var selectedlist = [];
	//选中的股票名称(展示在前台给业务员看的)
	var selectednamelist = [];
	
	function selectDiseae(){
		console.log("多项选择开始处理",initlist);
		//动态创建所有的checkbox元素
        
		for(var i = 0; i < initlist.length; i++){
			var tmpdiv = document.createElement("div");
			var tmplable = document.createElement("label");
			var tmpinput = document.createElement("input");
			
			tmpinput.setAttribute("name","mycheckbox");
			tmpinput.setAttribute("id",initlist[i].name);
			tmpinput.setAttribute("type","checkbox");
            tmpinput.setAttribute('style', 'text-align:left;');
			tmpinput.setAttribute("onclick","mycheck(this)");
            tmplable.setAttribute("for",initlist[i].name);
			tmpinput.setAttribute("value",initlist[i].name+"/"+initlist[i].code);
            var tmptext = document.createTextNode(initlist[i].name);
			tmpdiv.appendChild(tmpinput);
			tmplable.appendChild(tmptext)
			tmpdiv.appendChild(tmplable);
			selecteddiv.appendChild(tmpdiv);
		}
		
		//鼠标点击事件,如果点击在 selectedbutton,或者是在多选框div中的点击事件,不作处理。其他情况的点击事件,将多选空div隐藏
		document.onclick=function(event){
			if(event.target.id=="selectButton" || indiv){
                return;
			}
			selecteddiv.style.display="none";
			document.getElementById("fuzzysearchdiv").style.display="none";
		};
	};
	
	//点击selectButton,展示多选框
	function myclick (){
        console.log("???!!@@");
		document.getElementById("fuzzysearchdiv").style.display="block";
		selecteddiv.style.display="block";
	}
	
	//鼠标进入多选框的div【selectdiv】
	function mousein(){
		indiv = true;
	}
	
	//鼠标离开多选框的div【selectdiv】
	function  mouseout(){
		indiv = false;
	}
	
	//checkbox的点击事件
	function mycheck(obj){
        console.log("333333",obj);
        console.log("4444",obj.nextSibling);
        // console.log("666666",obj.nextSibling.nextSibling.nodeValue);
        console.log("5555",obj.nextSibling.innerHTML);
		if(obj.checked){
			selectedlist.push(obj.value);
			selectednamelist.push(obj.nextSibling.innerHTML);
		}else{
			for(var i = 0; i < selectedlist.length; i++){
				if(selectedlist[i] == obj.value){
					selectedlist.splice(i,1);
					selectednamelist.splice(i,1);
				}
			}
		}
		document.getElementById("selectButton").value=selectednamelist;
	}
	
	//模糊查询
	function myfuzzysearch(){
		var checkboxlist = document.getElementsByName("mycheckbox");
		for(var i = 0; i < checkboxlist.length; i++){
			if(checkboxlist[i].nextSibling.innerHTML.indexOf(fuzzysearchinput.value) == -1){
				checkboxlist[i].parentNode.style.display = "none";
			}else{
				checkboxlist[i].parentNode.style.display = "block";
			}
		}
	}

​

3、效果图(添加了点击文字也可以进行选定的功能)

4、参考链接

纯JS打造多选下拉框select+模糊查询功能_js多选下拉框模糊查询-优快云博客

### 关于 UniApp 中实现省区市三级联动择器 在 UniApp 开发框架中,可以利用 `picker` 组件或者自定义组件来实现省区市三级联动择器的功能。以下是基于 Vue.js 的开发模式以及 Element UI 的设计理念,在 UniApp 中实现该功能的方法。 #### 方法一:使用内置的 `picker` 组件 UniApp 提供了一个原生的 `picker` 组件,可以通过设置其属性为列形式来完成省区市的择操作。以下是一个简单的示例: ```html <template> <view> <button @click="showPicker = true">择地区</button> <picker mode="multiSelector" :range="areaList" range-key="label" :value="selectedIndex" @change="onChange"> <view>{{ selectedArea }}</view> </picker> </view> </template> <script> export default { data() { return { areaList: [ [{ label: '北京', value: '01' }, { label: '上海', value: '02' }], // 省份列表 [{ label: '北京市', value: '01' }, { label: '上海市', value: '02' }], // 城市列表 [{ label: '朝阳区', value: '01' }, { label: '黄浦区', value: '02' }] // 地区列表 ], selectedIndex: [0, 0, 0], selectedArea: '' }; }, methods: { onChange(e) { const index = e.detail.value; this.selectedIndex = index; this.selectedArea = `${this.areaList[0][index[0]].label} ${this.areaList[1][index[1]].label} ${this.areaList[2][index[2]].label}`; } } }; </script> ``` 上述代码展示了如何通过 `picker` 来构建一个联动择器[^1]。 --- #### 方法二:使用第三方库或自定义组件 如果需要更复杂的交互逻辑(如懒加载数据),可以择引入外部 JSON 数据文件并动态渲染项。下面展示了一种基于 JSON 文件的方式: ##### 步骤说明 1. 准备一份包含全国省市县的数据文件(JSON 格式)。可以从公开资源获取最新的行政区划数据。 2. 将这些数据存储到项目中的静态目录下,并通过异步请求读取它们。 3. 使用递归函数解析嵌套结构,生成适合显示的内容。 ##### 示例代码 假设已经有一个名为 `china-area.json` 的文件存放在 `/static/data/` 路径下,则可按如下方式编写页面逻辑: ```javascript // pages/AreaSelect/AreaSelect.vue <template> <view class="container"> <text>请择您的地址:</text> <input type="text" v-model="selectedText" disabled /> <picker mode="multiSelector" :range="selectorRange" @columnchange="onColumnChange" @change="onConfirm"></picker> </view> </template> <script> import chinaData from '@/static/data/china-area.json'; export default { data() { return { selectorRange: [[], [], []], // 初始化三列范围 currentProvinceIndex: 0, currentCityIndex: 0, selectedText: '', // 显示最终结果 allAreas: [] }; }, onLoad() { this.allAreas = chinaData; // 加载全部区域数据 this.initProvinces(); // 设置初始省份列表 }, methods: { initProvinces() { let provinces = []; for (let item of this.allAreas) { provinces.push(item.label); } this.selectorRange[0] = provinces; // 更新第一列 }, onColumnChange(e) { const column = e.detail.column; if (column === 0) { this.currentProvinceIndex = e.detail.value; this.updateCities(); } else if (column === 1) { this.currentCityIndex = e.detail.value; this.updateDynamicDistricts(); } }, updateCities() { const provinceCode = this.allAreas[this.currentProvinceIndex].value; const cities = this.findChildrenByParentValue(provinceCode).map(city => city.label); this.selectorRange[1] = cities; // 更新第二列城市 this.updateDynamicDistricts(0); // 同时重置第三列 }, updateDynamicDistricts(index = 0) { const provinceCode = this.allAreas[this.currentProvinceIndex].value; const cityCode = this.findChildrenByParentValue(provinceCode)[this.currentCityIndex]?.value || ''; const districts = this.findChildrenByParentValue(cityCode)?.map(district => district.label) || ['暂无']; this.selectorRange[2] = districts; // 更新第三列区县 }, findChildrenByParentValue(parentValue) { return this.allAreas.flatMap(area => area.children?.filter(child => child.parent_value === parentValue) ); }, onConfirm(e) { const result = e.detail.value.map((val, idx) => this.selectorRange[idx][val]); this.selectedText = result.join(' '); } } }; </script> ``` 此方案适用于较大型应用需求场景下的灵活配置[^1]。 --- #### 性能优化建议 对于大规模数据集而言,一次性加载所有节点可能会增加内存消耗和初始化时间成本。因此推荐采用 **懒加载机制** ,即仅当用户点击某个父项之后再发起网络请求拉取子项详情。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值