javascritp 实现带chekcbox功能的下拉框

首先设置初始下拉框内容为隐藏的，点击<请选择>执行changeR方法 changR方法里运用 switch 并设置标志初始为1，在1的情况下让下拉框内容循环显示并将标志位设置为0

在标志为0时；四次内容循环，获取复选框是否被选中如果被选中将value 的值传到第一行里并再次将将标志设为1 循环隐藏·掉

<html><head><style>ul{list-style-type:none;}li{border:solid 1px;width:200px;}.liShow{display:block;background:while;}.liHide{display:none;background:blue;}.liMenu{display:block;width:200px;height:20px}</style><script>var nextState=1;
//点击请选择执行方法
function changeR(obj){
//获取li元素 数组
var liArray=document.getElementsByTagName("li");
//alert(liArray);
var i=1;
var length2=liArray.length;
//alert(length2);
//nextState 1：为下拉框显示  0：下拉框隐藏
switch(nextState){case 1:obj.innerHTML="请选择";for(;i<length2;i++){liArray[i].className="liShow";
//alert(liArray[i].value);//alert(liArray[i].innerText);}nextState=0;break;case 0:for(;i<length2;i++){//循环隐藏 循环四次ob = document.getElementsByName("box");check_val = [];for(k in ob){if(ob[k].checked)check_val.push(ob[k].value);}// alert(check_val);obj.innerHTML=check_val;
// alert($("input[type='checkbox']:checked").text);// alert(boxc.checked);liArray[i].className="liHide";//循环隐藏的
}nextState=1;}}</script></head><body> <ul id="myUl"><li class="liMenu" onclick="changeR(this);"> 请选择</li>
<li value="1" class="liHide"><input name="box" type="checkbox" value="scrt"><span>scrt</span></li>
<li value="2" class="liHide"><input name="box" type="checkbox" value="数学"><span>数学</span></li>
<li value="3" class="liHide"><input name="box" type="checkbox" value="英语"><span>英语</span></li>
<li value="4" class="liHide"><input name="box" type="checkbox" value="语文"><span>语文</span></li>
</ul>
</body></html>

初始状态显示请选择点击请选择出现下图一选择选项再次点击请选择便可将选项传入第一个框

javascritp 实现带chekcbox功能的下拉框相关推荐

html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
【Android】带可输入功能的下拉框EditSpinner，附带Filter功能
功能实现,分为前期准备+使用. 1.前期准备在model下建立一个spinner包文件夹,在这个文件夹中添加4个java文件: 1.BaseEditSpinnerAdapter.java impor ...
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
有搜索功能的下拉框chosen.jquery.js适配手机端
在实现动态生成下拉框数据的时候接触到了一个好用的js插件chosen.jquery.js,但是在使用的过程中发现在浏览器中是好用的,能够完美的实现功能,浏览器端界面如下图所示: 但是在做微信工众号的时 ...
html网页常用功能：下拉框模糊搜索
下拉框模糊搜索很好使,但是比较难实现,下面就直接贴代码吧. <!doctype html> <html> <head> <meta charset=" ...
naiveui 表格数据，编辑表格功能，下拉框
1.不换行,超出部分隐藏且以省略号形式出现 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; <n-data-tab ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
三星二级菜单_Excel 如何设计带联想的二级下拉菜单？
在百度搜索网站中输入搜索关键词时,百度会逐步弹出相关的词条列表.例如,输入"三"会弹出包含"三国杀"."三维度"之类的词条列表,而输入&qu ...

javascritp 实现带chekcbox功能的下拉框

javascritp 实现带chekcbox功能的下拉框相关推荐

最新文章

热门文章

javascritp 实现 带chekcbox功能的下拉框

javascritp 实现 带chekcbox功能的下拉框相关推荐

最新文章

热门文章

javascritp 实现带chekcbox功能的下拉框

javascritp 实现带chekcbox功能的下拉框相关推荐