自定义的二级下拉控件

最新推荐文章于 2021-06-16 17:55:33 发布

高成浩

最新推荐文章于 2021-06-16 17:55:33 发布

阅读量683

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gaochh01/article/details/10466285

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
ul,li{
   list-style: none;
   margin:0;
   padding:0;
}
.dropbox-menu {
    border: 1px solid #DDDDDD;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    position: relative;
    font-size: 12px;
    vertical-align: middle;
}
.dropbox-menu .dropbox-item{
   float: left;
   height: 28px;
    line-height: 28px;
   vertical-align: middle;
}
.dropbox-menu .dropbox-input{
   width:100%;
   height:26px;
   border-top:0px ;
   border-bottom:0px ;
   border-left:1px solid #ccc;
   border-right:1px solid #ccc;
}
.dropbox-menu .dropbox-img{
   background: url("arrow-down.gif") no-repeat scroll right 0 transparent;
    cursor: pointer;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    width: 28px;
}
.dropbox-menu .dropbox-select-menu-searchLevel{
   background-color: white;
    white-space: nowrap;
    z-index: 1001;
   border: 1px solid #DDDDDD;
    left: -1px;
    display: none;
    position: absolute;
    top: 28px;
    width: 100%;
    min-height: 28px;
}

.dropbox-menu .dropbox-select-menu-level01{
   background-color: white;
    white-space: nowrap;
    z-index: 1000;
   border: 1px solid #DDDDDD;
    left: -1px;
    display: none;
    position: absolute;
    top: 28px;
    width: 100%;
}
.dropbox-menu li{
   line-height: 28px;
}

.dropbox-menu li:hover{
   background-color: #DDDDDD
}
.dropbox-menu .dropbox-select-menu-level02{
   border: 1px solid #DDDDDD;
    position: absolute;
    display: none;
    width: 100%;
}

.dropbox-menu .span-black40{
   width:40px;
   float:left;
}
.dropbox-menu i.hid-val{
   display:none
}
.dropbox-menu i.hid-valLevel2{
   display:none
}
</style>

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
   <div class="dropbox-menu" style="width:280px" id="myDrop">
       <input type="hidden" name="myDrop_level1" id="myDrop_level1"/>
       <input type="hidden" name="myDrop_level2" id="myDrop_level2"/>
       <div class="dropbox-item" style="width:30%">请选择：</div>
       <div class="dropbox-item" style="width:60%"><input class="dropbox-input" type="text" value="123"></div>
       <div class="dropbox-item" style="width:10%"><i class="dropbox-img"></i></div>
       <ul class="dropbox-select-menu-searchLevel"></ul>
       <ul class="dropbox-select-menu-level01">
           <li><span class="span-black40">  </span><i class="hid-val">178-1</i><span class="hid-name">一级1111111111</span>
               <ul class="dropbox-select-menu-level02" style="top:0px;left:280px">
                   <li><span class="span-black40">  </span><i class="hid-val">178</i><span class="hid-name">一级1111111111</span></li>
               </ul>

           </li>
           <li><span class="span-black40">  </span><span class="hid-name">一级1111111111</span><i class="hid-val">56555-1</i>
               <ul class="dropbox-select-menu-level02" style="top:28px;left:280px">
                   <li><span class="span-black40">  </span><i class="hid-val">56555</i><span class="hid-name">一级22222</span></li>
                   <li><span class="span-black40">  </span><i class="hid-val">56556</i><span class="hid-name">一级222</span></li>
               </ul>
           </li>
       </ul>
       <div style="clear:both;"></div>
   </div>
   <div class="dropbox-menu" style="width:280px" id="myDrop111">
       <input type="hidden" name="myDrop111_level1" id="myDrop111_level1"/>
       <input type="hidden" name="myDrop111_level2" id="myDrop111_level2"/>
       <div class="dropbox-item" style="width:30%">请选择：</div>
       <div class="dropbox-item" style="width:60%"><input class="dropbox-input" type="text" value="123"></div>
       <div class="dropbox-item" style="width:10%"><i class="dropbox-img"></i></div>
       <ul class="dropbox-select-menu-searchLevel"></ul>
       <ul class="dropbox-select-menu-level01">
           <li><span class="span-black40">  </span><i class="hid-val">178-1</i><span class="hid-name">一级1111111111</span>
               <ul class="dropbox-select-menu-level02" style="top:0px;left:280px">
                   <li><span class="span-black40">  </span><i class="hid-val">178</i><span class="hid-name">一级1111111111</span></li>
               </ul>

           </li>
           <li><span class="span-black40">  </span><span class="hid-name">一级1111111111</span><i class="hid-val">56555-1</i>
               <ul class="dropbox-select-menu-level02" style="top:28px;left:280px">
                   <li><span class="span-black40">  </span><i class="hid-val">56555</i><span class="hid-name">一级22222</span></li>
                   <li><span class="span-black40">  </span><i class="hid-val">56556</i><span class="hid-name">一级222</span></li>
               </ul>
           </li>
       </ul>
       <div style="clear:both;"></div>
   </div>
</body>
</html>
<script>
var searchPinyin_Str = [{"fullPinyin":"fuzhuang","thumbPinyin":"fz","fullNameShow":"服装","name":"服装","value":"3"},{"fullPinyin":"chenshan","thumbPinyin":"cs","fullNameShow":"服装-->衬衫","name":"衬衫","value":"6","parentValue":"3"},{"fullPinyin":"kuzi","thumbPinyin":"kz","fullNameShow":"服装-->裤子","name":"裤子","value":"8","parentValue":"3"},{"fullPinyin":"shuma","thumbPinyin":"sm","fullNameShow":"数码","name":"数码","value":"5"},{"fullPinyin":"shouji","thumbPinyin":"sj","fullNameShow":"数码-->手机","name":"手机","value":"10","parentValue":"5"},{"fullPinyin":"zhaoxiangji","thumbPinyin":"zxj","fullNameShow":"数码-->照相机","name":"照相机","value":"15","parentValue":"5"},{"fullPinyin":"shexiangji","thumbPinyin":"sxj","fullNameShow":"数码-->摄像机","name":"摄像机","value":"20","parentValue":"5"}];

function DropBox(id,onChangeEvent){
   this.id = id;
   this.onChange = onChangeEvent;
   this.init();
}
DropBox.prototype ={
   constructor: DropBox,
    init:function(){
           var _this = this;
           $(_this.id).find(".dropbox-input").click(function(event){
               event.stopPropagation();
               $(_this.id).find(".dropbox-select-menu-level01").show("slow");
           });
           $(_this.id).find(".dropbox-select-menu-level01").mouseleave(function(){
               dropbox_select_menu_Hide()
           });
           $(".dropbox-select-menu-level02").mouseleave(function(){
               $(this).css("display","none");
           });
           $(_this.id).find(".dropbox-select-menu-level01").children().mouseover(function(event){
               event.stopPropagation();
               $(_this.id).find(".dropbox-select-menu-level02").css("display","none");
               $(this).children(".dropbox-select-menu-level02").show();
           });
           $(_this.id).find(".dropbox-select-menu-level01").children("li").click(function(event){
               event.stopPropagation();
               dropbox_select_menu_ClearHidden();
               //hidden level 1 set value
               $(_this.id+"_level1").val($(this).children(".hid-val").html());
               //set input value
               $(_this.id).find(".dropbox-input").val($(this).children(".hid-name").html());
               dropbox_select_menu_Hide()
               var chEvent = eval(_this.onChange);
               if($.type(chEvent) == 'function'){
                   chEvent();
               }else{
                   console.log(_this.onChange +"is not a function!");
               }
           });
           $(_this.id).find(".dropbox-select-menu-level02").children("li").click(function(event){
               event.stopPropagation();
               dropbox_select_menu_ClearHidden();
               //hidden level 2 set value
               $(_this.id+"_level2").val($(this).children(".hid-val").html());
               //hidden level 1 set value
               $(_this.id+"_level1").val($(this).parent().parent().children(".hid-val").html());
               //set input value
               $(_this.id).find(".dropbox-input").val($(this).parent().parent().children(".hid-name").html()+"-->"+$(this).children(".hid-name").html());
               dropbox_select_menu_Hide()
               var chEvent = eval(_this.onChange);
               if($.type(chEvent) == 'function'){
                   chEvent();
               }else{
                   console.log(_this.onChange +"is not a function!");
               }
           });
           $(_this.id).find(".dropbox-img").parent().click(function(event){
               event.stopPropagation();
               $(_this.id).find(".dropbox-select-menu-level01").show("slow");
           });
           function dropbox_select_menu_Hide(){
               $(_this.id).find(".dropbox-select-menu-level01").css("display","none");
               $(_this.id).find(".dropbox-select-menu-level02").css("display","none");
           }
           function dropbox_select_menu_ClearHidden(){
               $(_this.id+"_level1").val("");
               $(_this.id+"_level2").val("");
           }
   }
}
new DropBox('#myDrop','test');
new DropBox('#myDrop111');

function test(){
   alert(123123);
}

</script>