HTML代碼部分:
<div class="layui-input-inline">
<select name="province" lay-filter="province" class="province" id="province" onchange="funpro()">
<option value="">請選擇省</option>
<option value="https://bbs.csdn.net/topics/北二">北二</option>
</select>
</div>
<div class="layui-input-inline">
<select name="floor" lay-filter="floor" id="floor" onchange="getfloor()" disabled>
<option value="">請選擇市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="area" lay-filter="area" id="area" disabled>
<option value="">請選擇縣/區</option>
</select>
</div>
JS代碼部分
<script>
function funpro(){
var select = document.getElementById("province");
for (var i=0;i<select.length;i++)
if(select.options[i].selected)
{
var det_id = select[i].value;
//ajax后臺獲取二級下拉選單資料
$.ajax({
type: "post",
url: "/get_floor/" + det_id, //$.trim(td0),
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (data) {
$("#floor").attr("disabled",false);
$.each(data,function(index,obj){
var $html = "";
$html += "<option value='" + obj + "'>" + obj + "</option>";
$("#floor").append($html);
});
}
});
}
}
function getfloor() {
//ajax后臺獲取三級下拉選單資料
var select = document.getElementById("floor");
var pro = document.getElementById("province");
for (var i=0;i<pro.length;i++)
if(pro.options[i].selected) {
var pro_name = pro[i].value; //二級選單下拉名
alert(pro_name);
}
for (var i=0;i<select.length;i++)
if(select.options[i].selected) {
var floor_name = select[i].value; //二級選單下拉名
alert(floor_name);
$.ajax({
type: "post",
url: "/get_area/" + pro_name+'/'+floor_name, //$.trim(td0),
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (data) {
$("#area").attr("disabled",false);
$.each(data,function(index,obj){
var $html = "";
$html += "<option value='" + obj + "'>" + obj + "</option>";
$("#area").append($html);
});
}
});
}
}
</script>
思想很重要 一級選單直接后臺給 選擇一級選單后呼叫funpro()函式ajax后臺獲取資料給二級選單 二級選單選中后呼叫 getfloor()函式ajax后臺獲取資料給三級選單
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/131456.html
標籤：JavaScript
下一篇：CSS布局