帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 下拉列表快速选择回显效果
下拉列表快速选择回显效果
浏览:1325次
-
评论:2次
-
发布时间:2021-05-31
Html
Css
Js
←
→
选择组织架构
已选择
/* CSS初始化 */ body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select { margin:0; padding:0; } body { font:14px,"Monospaced Number","Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,sans-serif,"宋体","Arial Narrow",HELVETICA; background:#fff; -webkit-text-size-adjust:100%; } a { color:#172c45; text-decoration:none; } a:hover { color:#cd0200; text-decoration:underline; } em { font-style:normal; } li { list-style:none; } img { border:0; vertical-align:middle; } table { border-collapse:collapse; border-spacing:0; } p { word-wrap:break-word; } :focus { outline:none; } /* index.css */ html,body { height:100%; } body { width:1000px; color:#000; font-size:14px; } .to__header .to__addUser { margin:0 auto; width:90%; font-size:20px; } .to__header .to__flow { margin:0 auto; padding:15px 0; width:90%; display:block; } .to__header .to__flow .to__flow__item { position:relative; width:30%; color:#999; display:inline-block; } .to__header .to__flow .to__flow__item .to__round { margin-right:12px; width:20px; height:20px; line-height:20px; text-align:center; border:1px solid #999; border-radius:50%; display:inline-block; } .to__header .to__flow .to__flow__item .to__active { color:#fff; background-color:#175ad8; border:1px solid #175ad8; } .to__header .to__flow .to__flow__item .to__flow__name { display:inline-block; cursor:pointer; } .to__header .to__flow .to__flow__item::after { margin:auto 0; content:">"; position:absolute; right:33%; top:0; bottom:0; height:20px; line-height:20px; font-size:26px; } .to__header .to__flow .to__flow__item:last-child::after { content:""; } .to__block { padding-left:10px; text-align:center; } .to__block .to__left,.to__block .to__right { width:45%; display:inline-block; vertical-align:text-top; } .to__block .to__left .to__item,.to__block .to__right .to__item { margin-left:-100px; padding-left:140px; height:40px; line-height:40px; border-bottom:1px solid #eee; } .to__block .to__left .to__title,.to__block .to__right .to__title { line-height:30px; text-align:left; } .to__block .to__left .to__title .to__remark,.to__block .to__right .to__title .to__remark { color:#999; display:inline-block; } .to__block .to__left .to__content,.to__block .to__right .to__content { width:100%; height:300px; text-align:left; border:1px solid #ccc; box-sizing:border-box; overflow-y:auto; } .to__block .to__left .to__content .to__search,.to__block .to__right .to__content .to__search { position:relative; height:30px; line-height:30px; border-bottom:1px solid #ccc; } .to__block .to__left .to__content .to__search input,.to__block .to__right .to__content .to__search input { padding-left:20px; padding-right:100px; width:100%; border:none; box-sizing:border-box; } .to__block .to__left .to__content .to__search .to__icon__search,.to__block .to__right .to__content .to__search .to__icon__search { position:absolute; top:0; right:0; width:50px; height:30px; border-left:1px solid #ccc; } .to__block .to__left .to__content .to__search .to__icon__search svg,.to__block .to__right .to__content .to__search .to__icon__search svg { margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; } .to__block .to__left { position:relative; margin-right:30px; } .to__block .to__left > div .to__subItem { padding-left:20px; display:none; } .to__block .to__left > div .to__show { display:block; } .to__block .to__left .to__arrow { margin:auto 0; position:absolute; right:0; top:0; bottom:0; color:#999; height:30px; line-height:30px; font-size:20px; transform:translateX(120%); } .to__block .to__left .to__arrow span:last-child { margin-left:-16px; } .to__block .to__left .to__item { position:relative; } .to__block .to__left .to__item .to__downList { position:relative; } .to__block .to__left .to__item .to__downList i { position:absolute; top:0; bottom:0; right:6px; width:12px; height:12px; display:inline-block; margin:auto 0; cursor:pointer; transform:rotate(-90deg); } .to__block .to__left .to__item .to__downList i svg { position:absolute; z-index:2; } .to__block .to__left .to__item .to__downList .to__roate { transform:rotate(0); } .to__block .to__left .to__item input[type="checkbox"] { position:relative; margin-right:6px; -webkit-appearance:none; vertical-align:middle; margin-top:0; background:#fff; border:#ccc solid 1px; min-height:12px; min-width:12px; } .to__block .to__left .to__item input[type="checkbox"]:checked { background:#3190e8; } .to__block .to__left .to__item input[type=checkbox]:checked::after { content:''; top:2px; left:1px; position:absolute; background:transparent; border:#fff solid 2px; border-top:none; border-right:none; height:2px; width:6px; -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .to__block .to__left .to__item .to__name { display:inline-block; vertical-align:middle; cursor:pointer; } .to__block .to__right { position:relative; } .to__block .to__right .to__item { position:relative; } .to__block .to__right .to__item .to__close { margin:auto 0; position:absolute; right:12px; top:0; bottom:0; cursor:pointer; } .to__block .to__right .to__item .to__close i { font-size:20px; transform:rotate(45deg); font-style:normal; display:inline-block; } .to__footer { margin-top:15px; text-align:center; } .to__footer .to__btn__group { display:inline-block; } .to__footer .to__btn__group .to__btn { margin:0 25px; padding:8px 0; width:80px; border:1px solid #999; display:inline-block; } .to__footer .to__btn__group .to__btn__primary { color:#fff; background-color:#175ad8; }
var checkedList = [] // 选中列表 // 节点单击事件 function domClick(e) { // 选中子元素所有input框 var subItem = e.parentNode.nextElementSibling var inputList = subItem.querySelectorAll(".to__item") for (var i = 0; i < inputList.length; i++) { var item = inputList[i] item.querySelector("input").checked = !e.querySelector("input").checked var subName = item.querySelector(".to__name").innerHTML } // 选中当前input框 e.querySelector("input").checked = !e.querySelector("input").checked select(e) } // 冒泡事件 function checkboxClick(e) { e.checked = !e.checked } // checkedbox选中事件 function select() { // 筛选在右侧区域需要遍历的内容 checkedList = [] var cList = document.getElementsByName("cName") for (var i = 0; i < cList.length; i++) { var classArr = (cList[i].parentNode.parentNode.className).split(' ') var className = classArr[classArr.length - 1] var level = parseInt(className.replace(/\w+-/g, '')) // // 设置显示的级别 var levelArr = document.querySelectorAll("[class^='to__item level-']") var max = 1 for (var a = 0; a < levelArr.length; a++) { var item = levelArr[a]; var arr = item.className.split('-') if (parseInt(arr[1]) > max) { max = parseInt(arr[1]) } } if (level == max && cList[i].checked == true) { checkedList.push(cList[i].value) } } // 右侧区域添加选中内容 var dom = document.getElementById("rightCont") dom.innerHTML = "" for (var i = 0; i < checkedList.length; i++) { var item = checkedList[i]; var div = document.createElement("div") div.className = "to__item" div.innerHTML = '
' + item + '
+
' dom.appendChild(div) } } // 取消选中事件 function cancel(dom) { var cList = document.getElementsByName("cName") for (var i = 0; i < cList.length; i++) { var item = cList[i]; if (item.value == dom.previousElementSibling.innerHTML) { item.checked = false select(); break; } } } // 下拉框点击事件 function Click(dom) { // 切换样式状态 if (dom.className.indexOf("to__roate") > -1) { dom.className = "" } else { dom.className = "to__roate" } // 显示隐藏内容 var domShow = dom.parentNode.parentNode.nextElementSibling if (domShow.className.indexOf("to__show") > -1) { domShow.className = "to__subItem" } else { domShow.className = "to__subItem to__show" } } window.onload = function() { // 模拟数据 var data = [{ name: "xxx公司", child: [{ name: "综合部", child: [{ name: "小明", child: [] }, { name: "小红", child: [] } ] }, { name: "技术部", child: [{ name: "小白", child: [] }, { name: "小黑", child: [] } ] }, { name: "UI部", child: [] } ] }] var endHtml = 0 var html = "" var level = 1 // 遍历树形结构 function getData(data, dom) { if (Object.prototype.toString.call(data) === '[object Array]') { for (var i = 0; i < data.length; i++) { // 添加标题 var item = document.createElement("div") var arrow = '
' // 设置显示级别 if (level == 3) { arrow = "" } item.innerHTML = '
' + arrow + '
' + data[i].name + '
' dom.appendChild(item) // 添加子元素 var subItem = document.createElement("div") subItem.className = "to__subItem" item.appendChild(subItem) if (data[i].child.length > 0) { level++ getData(data[i].child, subItem) } else { if (i == data.length - 1) { level-- } } } } } // 赋值 var baseDom = document.createElement("div") getData(data, baseDom) document.getElementById("leftCont").innerHTML = baseDom.innerHTML }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>下拉列表快速选择回显效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:JS按部门选择人员下拉列表代码是一款树形结构菜单制作公司组织架构下拉列表代码。
jQuery鼠标hover方向跟随遮罩效果
小说站自由调整字体大小JS特效
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv9 码圣
wx***75
2022年05月12日
现在开发前端都用啥技术
回复
Lv1 新人
wb***66
2023年03月31日
有点意思
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1325
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值