下拉框没有满足条件的元素时，用户手动新增元素。
本来打算直接将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(){
})
//也没有效果
多以就在选中元素时，做了前一次的元素和当前选中的元素是否相同的判断。
