原因:就是因为数据加载先后的问题。即使把ajax 设置成同步的话也会有这个问题。详细是怎么个问题没看太细节。我直接上我的代码
html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">现居住地</label>
<div class="layui-input-inline">
<select name="quiz1" name="city" lay-filter='sheng'>
<option value="">请选择省</option>
<option v-for="item in sheng" :value="item.value" >{{item.title}}</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2" lay-filter='shi'>
<option value="">请选择市</option>
<option v-for="item2 in shi" :value="item2.value" >{{item2.title}}</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option v-for="item3 in xian" :value="item3.value" >{{item3.title}}</option>
</select>
</div>
</div>
</from>
js
//1.首先给请求数据给省赋值--这里几点把ajax 设置成 async:false, ---- axios 使用 async / await来实现axios进行同步请求(不会的百度)。
//2 监听省的点击事件
layui.form.on('select(sheng)', function(data){
app.getWorkplace(data.value,'shi',1)
setTimeout(()=>{ //这个是重点,改变的加载顺序。。
layui.form.render()
})
});
附上我 vue.js 写的代码。myajaxWttAsync(是我自己封装的ajax 同步写到了这个里面)