I. Introduction
Note: (Get values from the database)
to obtain data of a drop-down box directly after loading the page, when the value is selected, the query data value matches the second drop down box into effect as FIG. :
Second, the code shows
1, HTML Code:
<div class="layui-form-item">
<label class="layui-form-label">公寓</label>
<div class="layui-input-inline" style="width: 100px">
<select name="selectBuilding" style="width: 100px;height: 30px;margin-top: 5px;text-align: center">
<option value="">请选择公寓</option>
</select>
</div>
<label class="layui-form-label" style="width: 40px">宿舍</label>
<div class="layui-input-inline" style="width: 100px">
<select name="selectDormitory" style="width: 100px;height: 30px;margin-top: 5px;text-align: center">
<option value="">请选择宿舍</option>
</select>
</div>
</div>
2, js codes:
the first drop box load direct access to the page data, when the first drop-down box is changed, a second drop-down box of Ajax, obtaining data corresponding to
<script>
$.ajax({
type: 'post',
url: 'findAllBuilding',
dataType: 'json',
data: {},
success: function (data) {
console.log(data);//使用console.log()方法来找到对象的内容
$.each(data, function (i) {
var trString = " <option value='" + data[i].buildingId + "'>" + data[i].buildingName + "</option>";
$("[name='selectBuilding']").append(trString);
});
}
});
$("[name='selectBuilding']").change(function () {
$.ajax({
type: 'post',
url: 'findAllDormitory',
dataType: 'json',
data: {
buildingId: $("[name='selectBuilding']").val()
},
success: function (data) {
$("[name='selectDormitory']").html("");
console.log(data);//使用console.log()方法来找到对象的内容
$.each(data, function (i) {
var trString = " <option value='" + data[i].dormitoryId + "'>" + data[i].dormitoryName + "</option>";
$("[name='selectDormitory']").append(trString);
});
}
});
});
</script>
Third, the end of
which is the main code, other codes do not show up! !