layui下拉框实现二级联动的两种方式
代码】layui下拉框实现二级联动的两种方式。
·
第一种方式
html1代码
<div class="layui-form-item">
<label class="layui-form-label">所在行业</label>
<div class="layui-input-block col-8">
<select name="enterprise_type_id" lay-filter="enterprise_type">
<option value="-1">无</option>
{volist name='enterprise_types' id='vo'}
<option value="{$vo.id}" {if isset($data.template) && $vo.id == $data.template.enterprise_type_id}selected{/if}>{$vo.name}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">企业模板</label>
<div class="layui-input-block col-8">
<select name="enterprise_template_id" lay-filter="enterprise_template" id="enterprise_template">
{if $data['template']}
<option value="{$data['template']['id']}">{$data["template"]['name']}</option>
{/if}
</select>
</div>
</div>
js
layui.use(['form'], function () {
let form = layui.form
, layer = layui.layer
, $ = layui.jquery;
form.render();
form.on('select(enterprise_type)', function (data) {
let id = data.value;
$.get(`/api/index/admin/enterprise_template/templates?name=skip&enterprise_type_id=${id}`, function (res) {
console.log(res)
let options = "";
let templates = res.data;
for (let template of templates) {
console.log(template)
options += `<option value="${template.id}">${template.name}</option>`;
}
console.log(options)
$("#enterprise_template").html(options);
form.render('select');
}, 'json');
});
更多推荐
已为社区贡献1条内容
所有评论(0)