select點擊前詢問
<!DOCTYPE html>
<html>
<head>
<title>select點擊前詢問</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<style type="text/css">
.label, .level, .region_id {
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="label">層級：</div>
<div class="level">
<select name="level" id="level" style="pointer-events: none;">
<option value="0" selected="selected">國</option>
<option value="1">省/直轄</option>
<option value="2">市</option>
<option value="2">縣/區</option>
<option value="2">街道</option>
</select>
</div>
</div>
<div class="box">
<div class="label">選擇區域:</div>
<div class="region_id">
<select name="region_id">
<option value="0">中國</option>
</select>
</div>
<div class="region_id">
<select name="region_id" id="region_id_1">
<option value="1">北京市</option>
<option value="2">廣東省</option>
<option value="2">四川省</option>
<option value="3">....</option>
</select>
</div>
<div class="region_id">
<select name="region_id">
<option value="4">北京市</option>
<option value="4">廣州市</option>
</select>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
var level = $("#level").val();
console.log(level);
if (level === 0) {
$(".level").unbind("click");//解除層級外層div點擊事件
}
})
//等層級層div點擊事件
$(".level").click(function () {
clicklevel();
})
function clicklevel (){
layer.confirm('是否需要重新選擇層級？', {
btn: ['取消','確定']
},function(){
console.log(22);
layer.closeAll();
},function(){
console.log(11);
$("#level").css("pointer-events",""); //移除select框的鼠標禁用屬性
$(".level").unbind("click"); //解除層級外層div點擊事件
layer.closeAll();
})
}
$("#region_id_1").change(function () {
$("#level").css("pointer-events","none"); //添加select框的鼠標禁用屬性
$(".level").bind("click", clicklevel); //添加層級外層div點擊事件
})
</script>
</html>