精华内容
下载资源
问答
  • 用jQuery制作模拟下拉框 浏览器自带的 下拉框样式不好看。在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。
  • 模拟下拉框select

    2012-01-07 20:48:51
    模拟下拉框select,之前穿过一个,是纯div和li写的,现在这个的本质还是select,虽然没有经过实验,不过应该不用怕开发的时候取不到值这个问题,修改起来也很简单,只要有点css基础的都应该没有问题~
  • 主要介绍了jQuery模拟下拉框选择对应菜单的内容,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • div模拟下拉框

    2018-09-28 17:14:29
    selectBox下拉框模拟,有多种样式,可以自己定义修改样式
  • JQ模拟下拉框多选

    2017-11-08 12:22:02
    JQ模拟下拉框多选

    效果图:


    源码拿去不谢:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			.MultiProvinces{
    			    position:relative;
    			}
    			.MultiProvincesHide{
    			    position:absolute;
    			    left:163px;
    			    top:36px;
    			    width:282px;
    			    height:145px;
    			    border:1px solid #ccc;
    			    background-color:white;
    			    overflow:auto;
    			}
    			.MultiProvincesHide>ul{
    			    width:100%;
    			    height:100%;
    			    list-style:none;
    			    margin:0 !important;
    			    padding:0 !important;
    			}
    			.MultiProvincesHide>ul>li{
    			    cursor:pointer;
    			    display:inline-block;
    			    float:left;
    			    width:130px;
    			}
    			.recalBox0{
    			    display: inline-block;
    			    width: 16px;
    			    height: 18px;
    			    vertical-align: top;
    			    overflow: hidden;
    			    background: url(img/tree_icons.png) no-repeat -208px -18px;
    			}
    			.recalBox1{
    			    display: inline-block;
    			    width: 16px;
    			    height: 18px;
    			    vertical-align: top;
    			    overflow: hidden;
    			    background: url(img/tree_icons.png) no-repeat -224px -18px;
    			}
    			.MultiProvinces>span{
    			    display: inline-block;
    			    width: 160px;
    			    height: 35px;
    			    line-height: 35px;
    			    text-align: right;
    			    font-size: 16px;
    			    font-family: "PingFang";
    			    color: #747474;
    			    font-weight: bold;
    			}
    			.MultiProvinces>input{
    			    width:281px;
    			    height:35px;
    			    border:1px solid #ccc;
    			    border-radius:4px;
    			    background-color:#fff7ee;
    			}
    			.hide{
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
            <div class="MultiProvinces">
                <span>
    		                模拟多选下拉框
                </span>
                <input type="text" placeholder="请选择省份" id="MultiProvincesTop" />
                <input type="text" placeholder="这是选中的ID值!" id="MultiProvincesBottom" name="city" />
                <div class="MultiProvincesHide hide">
                    <ul></ul>
                </div>
            </div>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				 var data = [
    		            {id: "110000", text: "北京市"},
    		            {id: "120000", text: "天津市"},
    		            {id: "130000", text: "河北省"},
    		            {id: "140000", text: "山西省"},
    		            {id: "150000", text: "内蒙古自治区"},
    		            {id: "210000", text: "辽宁省"},
    		            {id: "220000", text: "吉林省"},
    		            {id: "230000", text: "黑龙江省"},
    		            {id: "310000", text: "上海市"},
    		            {id: "320000", text: "江苏省"},
    		            {id: "330000", text: "浙江省"},
    		            {id: "340000", text: "安徽省"},
    		            {id: "350000", text: "福建省"},
    		            {id: "360000", text: "江西省"},
    		            {id: "370000", text: "山东省"},
    		            {id: "410000", text: "河南省"},
    		            {id: "420000", text: "湖北省"},
    		            {id: "430000", text: "湖南省"},
    		            {id: "440000", text: "广东省"},
    		            {id: "450000", text: "广西壮族自治区"},
    		            {id: "460000", text: "海南省"},
    		            {id: "500000", text: "重庆市"},
    		            {id: "510000", text: "四川省"},
    		            {id: "520000", text: "贵州省"},
    		            {id: "530000", text: "云南省"},
    		            {id: "540000", text: "西藏自治区"},
    		            {id: "610000", text: "陕西省"},
    		            {id: "620000", text: "甘肃省"},
    		            {id: "630000", text: "青海省"},
    		            {id: "640000", text: "宁夏回族自治区"},
    		            {id: "650000", text: "新疆维吾尔自治区"},
    		            {id: "710000", text: "台湾省"},
    		            {id: "810000", text: "香港特别行政区"},
    		            {id: "820000", text: "澳门特别行政区"}
    		        ]
    				$("#MultiProvincesTop").click(function () {
    		            $(".MultiProvincesHide").removeClass("hide");
    		            for (var k = 0; k < data.length; k++) {
    		                $(".MultiProvincesHide>ul").append("<li>" + "<span class='Images recalBox0'>" + "</span> " + "<span class='dataId hide'>" + data[k].id + "</span><span class='cityName'>" + data[k].text + "</span></li>")
    		            }
    			    });
    		        $(".MultiProvincesHide").mouseleave(function () {
    		            $(".MultiProvincesHide").addClass("hide");
    		        });
    				var dataId = [];//存放省份ID
    		        var cityName = [];//存放省份名称
    		        $(".MultiProvincesHide>ul").on("click", "li", function () {
    		            var className = $(this).children(".Images").attr("class");
    		            if (className.indexOf("recalBox0")>-1) {//第一次点击是添加进去
    		                $(this).children(".Images").addClass("recalBox1").removeClass("recalBox0");
    		                var val = $(this).children(".dataId").text();
    		                var val2 = $(this).children(".cityName").text();
    		                console.log(val, val2);
    		                dataId.push(val);
    		                cityName.push(val2);
    		                $("#MultiProvincesTop").val(cityName);
    		                $("#MultiProvincesBottom").val(dataId);
    		            }
    		            if (className.indexOf("recalBox1") > -1) {//再次点击是取消掉
    		                $(this).children(".Images").addClass("recalBox0").removeClass("recalBox1");
    		                var val = $(this).children(".dataId").text();
    		                var val2 = $(this).children(".cityName").text();
    		                for (var k = 0; k < dataId.length; k++) {
    		                    if (dataId[k] == val) {
    		                        dataId.splice(k, 1);
    		                    }
    		                }
    		                for (var g = 0; g < cityName.length; g++) {
    		                    if (cityName[g] == val2) {
    		                        cityName.splice(g, 1);
    		                    }
    		                }
    		                $("#MultiProvincesTop").val(cityName);
    		                $("#MultiProvincesBottom").val(dataId);
    		            }
    		        });
    			});
    		</script>
    	</body>
    </html>
    
    图片在这里------------------------------


    实例已经发布代码片,点击查看预览:http://www.jq22.com/webqd3326

    展开全文
  • 纯js模拟下拉框

    2017-09-15 10:45:18
    纯js模拟下拉框


    <div class="selects" id="selects">
              <h4 class="label" id="label"  @click = showData()>请选择适配器</h4>
              <ul id="ul-option" style="display: none">
                <li v-for="adapter in adapters" v-model="adapterSelected">
                  <span style="float: left;margin:0px 4px;"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></span>
                  <span>{{adapter.ip}}</span>
                </li>
              </ul>
            </div>


    <script>

       selectEvent(lis,num){
            var self = this;
            var oneli = lis[num];
            oneli.onmouseenter = function () {
              oneli.style.backgroundColor = '#3398FE';
              oneli.style.color = '#fff';
            }
            oneli.onmouseleave = function () {
              oneli.style.backgroundColor = '';
              oneli.style.color = '';
            }
            oneli.onclick = function () {
              document.getElementById('label').innerHTML = oneli.innerText;
              self.adapterSelected = oneli.innerText;
              oneli.parentNode.setAttribute('style',"display:none;");
            }
            num++;
            if(lis[num] != null || lis[num] != undefined){
              self.selectEvent(lis,num);
            }
          },
          showData(){
            var uls = document.getElementById('ul-option');
            uls.style.display = '';
            var lis = uls.getElementsByTagName('li');
            var num = 0;
            this.selectEvent(lis,num);
          },
    </script>



    <style>
        .selects{
        display: inline-block;
      }
      .label{
        color:#000;
        border: solid 1px #0eb1d7;
        background: url("../../static/images/select_icon.png") no-repeat scroll right center transparent;
        padding-right: 14px;
        height: 30px;
        line-height:30px;
        width: 121px;
      }
      #ul-option{
        color:#000;
        position:absolute;
        border:1px solid #51a4f7;
      }
      #ul-option li {
        background-color: #fff;
        width:135px;
        height: 20px;
        line-height: 20px;
      }
    </style>
    展开全文
  • js模拟下拉框 使用 只需在jquery后引入jquery.validation文件 [removed][removed] [removed][removed] 初始化 选择元素调用combobox方法传入配置项 $('select').combobox(options); 方法 调用方式 //选择元素调用...
  • 问题1:为什么要模拟下拉框?1,浏览器自带的 下拉框样式不好看。2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框。先构建HTML结构和CSS...

    http://www.cssrain.cn/article.asp?id=1323

    问题1:为什么要模拟下拉框?
    1,浏览器自带的 下拉框样式不好看。
    2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面。

    OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框。

    先构建HTML结构和CSS样式。
    看Demo1:
    http://cssrain.cn/demo/jqueryCRselectbox/demo1.html

    构建好后,我们开始添加效果。
    看Demo2:
    http://cssrain.cn/demo/jqueryCRselectbox/demo2.html

    好,有了前2个例子的基础,我们完全可以构建一个插件:
    看Demo3:
    http://cssrain.cn/demo/jqueryCRselectbox/demo3.html


    思路:
    通过已知的下拉框,把里面的数据循环出来,放到另一个div的ul列表里,
    另一个div就是简单的弹出层而已。
    通过hidden可以 获取下拉框的选中的值和文本 。


    源文件下载:
    http://cssrain.cn/demo/jqueryCRselectbox/jqueryCRselectbox.rar

    转载于:https://www.cnblogs.com/anjing/archive/2009/12/03/1616354.html

    展开全文
  • 模拟下拉框效果

    2017-04-17 13:10:36
    <!doctype html> 模拟下拉框 <script src="js/jquery.min.js"></script> <style> *{padding:0;margin:0;} li{list-style:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模拟下拉框</title>
        <script src="js/jquery.min.js"></script>
        <style>
    
            *{padding:0;margin:0;}
            li{list-style:none;}
            input{outline: none;}
    
            .select {width:200px;height: 30px;position: relative;margin:100px;  font-size:12px;}
            .select_input{width:200px;height: 30px;line-height:30px;text-indent:10px;
              border:1px solid #cccccc;}
    
            .select_btn{width:20px;height:30px;background:url("img/sel.png") no-repeat 6px 11px;
                display:block;right:0px;top:0px;position: absolute;cursor:pointer; }
    
            .select_ul{background:#333333;color:#ffffff;
                padding:10px;border-radius:6px;z-index:20;position:absolute;right:0;
                top:30px;display: none;}
            .select_li{line-height:26px;height:26px;width:180px;border-bottom:2px solid #ffffff;cursor:pointer; }
    
            .select_li:last-of-type{border-bottom:0;}
    
        </style>
    </head>
    <body>
    
    
        <div class="select">
    
            <input type="text" class="select_input">
            <span class="select_btn"></span>
            <ul class="select_ul">
                <li class="select_li select_checked">杭州技有限公司1</li>
                <li class="select_li">杭州有限公司2</li>
                <li class="select_li">杭州科技有限公司3</li>
                <li class="select_li">杭州技有限公司5</li>
                <li class="select_li">杭州技有限公司6</li>
            </ul>
    
        </div>
    
    
    <script>
    
        $(function(){
    
            selModel(".select");
    
    
            function selModel(idid) {
    
                $(idid).bind("click",".select_btn",function () {
                    $(".select_ul").slideToggle(300);
                });
    
                optCheck(idid);  //对应checked值显示
    
    
                $(idid).bind("click",".select_li",function (event) {
                    var $target = $(event.target);
                    $(event.target).addClass("select_checked").siblings().removeClass("select_checked");
                    optCheck(idid);  //对应checked值显示
                })
    
    
                function optCheck(id){
                    var optCheck=$(id).find(".select_checked").text();
                    $(id).find(".select_input").val(optCheck);
                }
    
    
            }
    
    
    
    
    
        })
    
    
    </script>
    
    
    
    </body>
    </html>

    这里写图片描述

    展开全文
  • Js模拟下拉框(select-option)的实现

    千次阅读 2019-08-31 23:49:01
    js模拟下拉框 今天想给大家分享一下之前自己做的一个js模拟下拉框,所有select-option中我能发现的操作,都在我的代码中将其实现。在本文最后会附上源码,希望对大家有所帮助。如果select中还有一些本人未实现的希望...
  • 通过Jquery模拟下拉框 兼容ie Firefox chrome <p><i>旅游产品名称</i><em></em></p> 旅游产品名称 其他产品名称 没有产品名称 <l
  • 整体盒子中包含:外层盒子,内层模拟下拉框 // 整体盒子 <div class="city-map-select"> // 外层盒子 <div class="show-cityname"> <input type="text" readonly value="行政区划" /> .
  • 用js模拟下拉框

    2020-03-15 17:32:37
    虽然在我们的 html 中有下拉框这一选项,但是很多时候我们不嫩直接引用,因此今天就来模拟一个下拉框,直接来看代码吧 css部分 <style type="text/css"> .box{width:200px;height:30px;line-height: 30px;...
  • div模拟下拉框的Demo

    2019-03-19 02:07:22
    NULL 博文链接:https://xiaoyi3317.iteye.com/blog/732072
  • 自己这些天写的一点小东西 用JQuery JS 创建一个模拟下拉框。有单选和多选的。自我感觉还是做的过得去,支持IE和FF其他浏览器没试过
  • select几乎我们都会碰到,而默认的select...这里我们用jQuery来模拟Select下拉框。jQuery-selectHTML代码[html]点击选择下拉框内容江西省广东省江苏省河北省湖南省[/html]CSS代码[css]/* —- Select —-*/.selectCo...
  • html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" onkeyup="InputChange(this)" id="txtInput">...@*模拟下拉框*@ <div class="divselect" id="dpSelec...
  • js模拟下拉框

    2017-12-27 13:48:00
    html <label class="selectGroup"> <span class="selectP"></span> <select class="select"> <option>类型1</option> <option>.../o...
  • } 3.js 逻辑(重要) 需要引入的文件: 点击模拟框后,实现右侧箭头方向切换、实现模拟下拉框隐藏显示切换 // 默认箭头状态 $(".mock_select_box").addClass("select_down"); // 点击模拟框后 $(".mock_select_box ...
  • 以下是用div来模拟select下拉菜单具体代码:div模拟select下拉菜单校内链接校内链接校内链接校内链接校内链接校内链接办公室办公室办公室办公室办公室办公室办公室办公室组织部(党校)宣传部(新闻中心)统战部(港澳台...
  • ui、li模拟下拉框

    2019-09-22 23:54:08
    转载:原文地址:https://www.jianshu.com/p/e303e0298e9e 效果图: HTML:  <div class="rank_top"> <div class="rank_top_1"> <ul class="rank_top_1_ul"> ...
  • 解决:自己模拟写一个select带向下三角得下拉框; 原理: 1、我这里用的div当作一个框,里面包含下拉框选中内容和三角形(三角形是靠css实现得) 2、用ul/li模拟一个显示隐藏得下拉框; 3、jq获取元素以及显示...
  • Document.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}.mod_select ul{margin:0;padding:0;}.mod_select ul li{display:block;list-style-type:none;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,063
精华内容 3,625
关键字:

模拟下拉框