body里代码
<select id="val1" name="val1" style="width: 100%;" class="easyui-combobox" data-options="onChange: loadval2" ></select>
<select id="val2" name="val2" style="width: 100%;" class="easyui-combobox" ></select>
已有的数据类型,只展示部分
var city = [{
value: '1',
text: '南京',
other: [{
value: "320",
text: "南京市本级"
}, {
value: "321",
text: "玄武区"
}]
},{
value: '2',
text: '其他省市',
other: [{
value: "250",
text: "其他省市"
}]
}]
js代码,我这里是页面初始化时候就加载数据,这是第一个下拉框的数据填充
$("#val1").combobox({
data: city, //需要的数据,必须是json格式,如果不是请转换
editable: false, //给select框赋属性不可编辑
valueField: 'value', //selelct框的value值
textField: 'text', //select框的text值,也是下拉框展示出来的值
required: true //必填字段
})
在第一个下拉框中的onchange属性表示在下拉框值改变时触发,在js中自己写该方法,加载第二个下拉框数据
function loadval2(){
//获取到第一个下拉框的val值
var val = $("#val1").combobox("getValue");
//遍历循环已有的数组
//value 没研究,可以console.log输出一下
//index 数组的下表值
//array 表示整个数组city
city.forEach((value, index, array) => {
//如果找到了当前下拉框,就去拿other中的数据
if (val === array[index].value){
$("#remark5").combobox({
data: array[index].other,
editable: false,
required: true,
valueField: 'value',
textField: 'text',
})
}
})
}
以上是存在已有数组的情况下填充数据
================================================
下面是请求后台返回得到数据
<select id="qer" name="qer" style="width:100%" class="easyui-combobox" data-options="url:'这里填写请求后台的url即可',editable:false, panelHeight:'auto'" required="required"></select>