PROMULGATOR

    keefelu

    广东省广州市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
<div class="selectBox" onmouseleave="hide()">
    <input class="boxTxt" type="text" onfocus="show()" placeholder="请选择" readonly="readonly">
    <!-- 显示中文值 -->
    <input class="boxVal" value="">
    <!-- 绑定值 -->
    <ul>
        <li data-value="440100">广州市</li>
        <li data-value="440300">深圳市</li>
        <li data-value="440400">珠海市</li>
    </ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
*{margin:0;padding:0;}
html,body,div,span,ol,ul,li,dl,dt,dd{
    margin:0;padding:0;
}
ol,ul,li,dl,dt,dd{
    list-style-type:none;
}
.selectBox{
    position:relative;
    width:200px;
    margin:30px auto;
    line-height:100%;   
}
.boxTxt{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAIAAADgN5EjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACkSURBVHjaYlywYAED6eDr168sDAwMAQEBpOqsrKxkYiAXDF2du3Idp97FqXJXbu4u3HaerzbGrnlXrkDYYgKuxaIZizY0nW6TP6yKRdcM0xa76sNkNzx2omnGqY2BgYEFwxVukz+c1XA0rj5fbSzAwIBDG65YUc7ef7bVEJ82rHYiNDNMvZud7YYrllhwR7VydrbysEy3pAGWr1+/VlZWkqETMAB0IETspx6jPQAAAABJRU5ErkJggg==) no-repeat center right #fff;
    background-size:21px 20px;
    padding-right:21px; 
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -khtml-box-sizing:border-box;
    -ms-box-sizing:border-box;
    border: solid 1px #eee;
    width:100%;
    height:24px;
    line-height:22px;
    text-indent:5px;
    cursor:pointer;
}
.boxVal{
    /* display:none; */
    position:absolute;
    margin-left:220px;
    height:24px;
    line-height:22px;
    text-indent:5px;
    width:100%;
    top:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function show() {
    $(".selectBox").delegate(".boxTxt", "click", function() {
        $(this).siblings("ul").show();
        $(".selectBox").delegate("li", "click", function() {
            var txt = $(this).text(),
                txtVal = $(this).data("value");
            console.log(txtVal);
            $(this).parent("ul").siblings(".boxTxt").val(txt);
            $(this).parent("ul").siblings(".boxVal").val(txtVal);
            $(this).parent("ul").hide();
        });
    });
    $(".selectBox").delegate("li", "mouseenter", function() {
        $(this).addClass("selected");
        $(this).siblings("li").removeClass("selected");
    })
};
function hide() {
    $(".selectBox ul").hide();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0
 立即下载

替换下拉控件（可控样式）

很多时候select下拉样式不能修改而发愁，不能对各种属性的不兼容去百度，搜索，这里可以帮到你，完全不用担心兼容问题，也不用担心返回值问题，显示值和绑定的code或id隐藏值的实现

1
      keefelu0
      2019/8/5 14:08:16
      我发表的代码竟然不能编辑和修改 回复