下拉框没有满足条件的元素时，用户手动新增元素。

本来打算直接将input输入框添加第一条option中，但是出现了select和option下拉列表都会覆盖div的情况，上网查了资料，于是使用了iframe覆盖select再将div覆盖iframe的方式，发现只能覆盖select并没有覆盖option下拉列表，用了其他方式也没能解决，于是自己就用div加ul  li做了此功能，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        ul li{
            list-style: none;
        }
        .car_content{
            display: none;
            border: 1px solid #ccc;
            border-top:none;
            text-align: left;
            padding-top:5px;
            width: 200px;
            overflow: hidden;
        }
        .car_brand{
            width: 200px;
        }
        .selected,.car_content ul{
            cursor: default;
        }

        .selected{
            height: 25px;
            width: 200px;
            background: url(down_arrow.png) no-repeat;
            background-position: 180px;
            background-size: 15px;
            border: 1px solid #cccccc;
        }

        #ipt{
            width: 150px;
            height: 25px;
            margin: 0;
            padding: 0;
        }
        .btn{
            background-color: #00CCFF;
            width:40px;
            height: 30px;
            border: none;
            outline: none;
            color: #fff;
            margin: 0;
            padding: 0;
            margin-left:-2px;
            vertical-align: middle;
        }
        .add{
            text-align: center;
        }

        ul{
            padding-left:5px;
        }

    </style>
</head>
<body>

<div class="car_brand">
    <div class="select">
        <input type="text" class="selected" readonly>
    </div>
    <div class="car_content" id="divBtn">
        <div class="add">
            <input type="text" placeholder="添加车辆品牌" id="ipt">
            <button class="btn">新增</button>
        </div>
        <ul>
            <li>11111</li>
            <li>222</li>
            <li>333333</li>
            <li>444444</li>
            <li>555555</li>
            <li>66666666</li>
        </ul>
    </div>
</div>

<script>
    $(function () {

        $(".selected").focus(function () {
            $(".car_content").css("display","block");
        })

        $(".car_content ul").on("click","li",function () {
            //上一次的值
            var val=$(".selected").val();

            $(".selected").val($(this).html());
            $(".car_content").css("display","none");

            //当前选中的值
            var data=$(".selected").val();

            //只有当值发生改变时才发送请求
            if(val==data){
                return false;
            }else {
               console.log("值改变了");

               $.ajax({
                   type:"post",
                   url:" ",
                   dataType:"json",
                   data:"data",
                   success:function () {
                   }
               })

            }

        })

        //点击其余地方隐藏下拉框
        $(document).click(function(){
            $(".car_content").hide();
        });
        $(".car_brand").click(function () {
            event.stopPropagation();
        })

        //添加车辆类型
        $(".btn").bind("click",function () {
            //获取输入的值
            var newOption = $("#ipt").val();
            if(newOption==""||newOption==null){
                return false;
            }else {
                //添加到下拉框
                var li=document.createElement("li")
                li.append(newOption);
                $(".car_content ul").append(li);
                $("#ipt").val("");
            }
        })

    })
</script>

</body>
</html>

应该是当元素改变时才发送ajax请求，但是当把input设为只读属性之后，发现无法监听change事件

 $(".selected").bind("input propertychange",function(){
    
})
//也没有效果

多以就在选中元素时，做了前一次的元素和当前选中的元素是否相同的判断。

posted @ 2019-01-22 18:31  yang_xiaoxi  阅读(405)  评论(0)    收藏  举报