模拟下拉框

//模拟下拉框
$(".Js_dropMod").each(function(){
        var _this=$(this)
            //_this.find(".Js_hiddenVal").val("")
            var curObj=_this.find(".Js_curVal");
            if(curObj.find("input:text").length<=0){
                var curText=curObj.text();
                curObj.html("");
                curObj.append("<input type=‘text‘ value=‘"+curText+"‘ />")
            }
        //_this.find(".Js_hiddenVal").val("")
        _this.find(".Js_hiddenVal").attr("normal",_this.find(".Js_curVal").find("input:text").val())
        _this.hover(function(){
            _this.find(".Js_hiddenVal").attr("normal",_this.find(".Js_curVal").find("input:text").val())
            //添加zIndex的值是为了兼容IE8以下浏览器层级
            _this.css("zIndex","999")
            _this.parents(".pop-conlists").css("z-index","2")
            if(_this.find(".select-list").find("li").length<=0) return;
            _this.find(".select-list").show().find("li").show();
            if(_this.parents(".search-mod").length>0){
                _this.parents(".search-mod").eq(0).css("z-index",5)
            }
        },function(){
            _this.css("zIndex","999")
            _this.find(".select-list").hide().find("li").removeClass("hover");
            if(_this.parents(".search-mod").length>0){
                _this.parents(".search-mod").eq(0).css("z-index",1)
            }
        })
    //添加hover方法
    _this.find("ul li").each(function(){
        $(this).hover(function(){
            $(this).addClass("hover").siblings("li").removeClass("hover")
        },function(){
            $(this).removeClass("hover")
        }).click(function(e){
            var that=$(this).find("a")
            _this.find(".Js_hiddenVal").attr("normal",that.text());
            if(that.parents("ul").siblings(".Js_curVal").find("input:text").length<=0){
                that.parents("ul").siblings(".Js_curVal").text(that.text()).css("color","#5A5A5A")
            }
            else
            {
                that.parents("ul").siblings(".Js_curVal").find("input:text").val(that.text()).css("color","#5A5A5A")
            }
            that.parents("ul").siblings(".Js_hiddenVal").val(that.attr("rel"))
            that.parents("ul").siblings("label.error").remove();
            that.parents("ul.select-list").hide()
            //e.preventDefault();
            //e.stopImmediatePropagation()
        })
    })    
})

<!-- <div class="shortcut">
                    <span class="left-t">应用插件:</span><div class="Js_dropMod select-box inline-select select-200 ">
                        <input type="hidden" class="Js_hiddenVal" id="deleteflag" name="deleteflag" value="1"/>
                        <span class="Js_curVal">请选择</span>
                        <ul class="select-list">
                            <li class="select-item" onclick="loadDeleteflag(‘1‘)" ><a href="javascript:void(null)" rel="1">企业通讯录android版企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘2‘)" ><a href="javascript:void(null)" rel="2">企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘3‘)" ><a href="javascript:void(null)" rel="3">企业通讯录android版</a></li>
                        </ul>
                    </div>
                    <span class="left-t">应用:</span><div class="Js_dropMod select-box inline-select select-200 ">
                        <input type="hidden" class="Js_hiddenVal" id="deleteflag" name="deleteflag" value="1"/>
                        <span class="Js_curVal">请选择</span>
                        <ul class="select-list">
                            <li class="select-item" onclick="loadDeleteflag(‘1‘)" ><a href="javascript:void(null)" rel="1">企业通讯录android版企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘2‘)" ><a href="javascript:void(null)" rel="2">企业通讯录android版</a></li>
                            <li class="select-item" onclick="loadDeleteflag(‘3‘)" ><a href="javascript:void(null)" rel="3">企业通讯录android版</a></li>
                        </ul>
                    </div>
                </div>     -->

/*表单模拟select*/
.select-box{ position:relative;float:left; width:80px;padding: 0 26px 0 12px;border:1px solid #BFBFC0; height:22px;line-height:22px; background:url(../images/icon/icon_down.png) no-repeat right center #fff;  text-align:left;}
.select-box .Js_curVal input,.Js_curVal input[type=text]{ width:100%; height:24px; border:none;}
input:focus{outline:none;}
.select-box.w90{width:90px}
.select-list{ background:#F0F0F0}
.select-box.w90 .select-list{ width:128px;border-color:#ddd}
.w30{width:30px}
.w30 .select-list{ width:68px;border-color:#ddd}
.select-box.w80{width:80px}
.select-box.w80 .select-list{ width:118px;border-color:#ddd}
.select-box span{display:inline-block;*display:inline;*zoom:1;height:22px;line-height:22px;overflow:hidden; width:100%;font-size:12px;}
.select-list{ display:none; position:absolute; z-index:5;left:-1px;top:22px; border:1px solid #ddd; white-space:nowrap; overflow:auto; max-height:300px;}
.select-list .select-item{ *zoom:1; padding:0px 10px 0px 12px;}
.select-list .select-item.indent{text-indent:5px;}
.select-list .select-item.bold{font-weight:700;font-style: oblique;}
.select-list .hover{/*background-color:#6BADEA;*/ color:#6888B9; cursor:pointer;}
.select-item a:link,.select-item a:visited{padding:0px; word-break: break-all;word-wrap: break-word;display:inline-block;*display:inline;*zoom:1;font-size:12px;}
.select-item a.snode{font-style:none;float:left; text-decoration:none;}
.select-item a:hover,.select-item a:active{  color:#fff;}
.select-item s{ text-decoration:none;}

.select-list .hover{*zoom:1;}
.select-list .hover a:link,.select-list .hover a:visited{display:inline-block;*display:inline;*zoom:1;/*background-color:#6BADEA;*/color:#6888B9;}
.main-hd .select-list .hover a:link,.main-hd .select-list .hover a:visited{display:block;}
.select-box label.error{ margin-top:2px;}
.Js_coverDropMod{cursor:pointer;}

时间: 2024-10-19 10:58:45

模拟下拉框的相关文章

div模拟下拉框

1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e = e || window.event; var dom = e.srcElement || e.target; if (dom.id != "divList"  && document.getElementById("divList").style.

css模拟下拉框,vue获取双向绑定的值

原生的下拉框用vue获取值双向绑定简直不要太好用,Duang的一下就行了 <div id="datePrice"> <select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"> <option v-for="item in dateList" v-bind:valu

jq插件又来了,模拟select下拉框,支持上下方向键哦

好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (function($){ //模拟下拉框 $.fn.htmlSelect = function(opt){ if($(this).length==0) return false; var opts = $.extend({ defaultsItem : 0, //默认选中的select项 saveInput

用div,ul,input模拟select下拉框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src=&

[js开源组件开发]模拟下拉选项框select

模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://www.lovewebgames.com/jsmodule/select.html 源码查看下载请点击这里https://github.com/tianxiangbing/select 调用示例 <select name="select" id="select"&g

jq+css模拟模糊搜索下拉框实现

html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" onkeyup="InputChange(this)" id="txtInput"> </div> @*模拟下拉框*@ <div class="divselect" id="dpSelect">

自己模拟下拉单选框

/** * 自己模拟下拉框选项 * 2018年6月28日16:51:26 * author: ybixian */ function selectModel() { var $box = $('div.model-select-box'); var $option = $('ul.model-select-option', $box); var $txt = $('div.model-select-text', $box); var speed = 10; /* * 单击某个下拉列表时,显示当前

【4】自定义下拉框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

自制jquery可编辑的下拉框

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致