css修改layui的下拉框样式 js_layui下拉框实现级联

选择city

北京

上海

广州

深圳

杭州

选择区域

layui.use(‘form‘, function () {

var form = layui.form;

layui.form.on(‘select(cityfilter)‘, function (data) {

if (data.value == "") {

$(‘#quyuid‘).html(‘请选择区域‘);

layui.form.render("select");

}

else {

if (data.value == "0") {

$(‘#quyuid‘).html(‘请选择区域‘)

$(‘#quyuid‘).append(new Option("北京1", 0));

$(‘#quyuid‘).append(new Option("北京2", 1));

$(‘#quyuid‘).append(new Option("北京3", 2));

$(‘#quyuid‘).append(new Option("北京4", 3));

}

else if (data.value == "1") {

$(‘#quyuid‘).html(‘请选择区域‘)

$(‘#quyuid‘).append(new Option("上海1", 0));

$(‘#quyuid‘).append(new Option("上海2", 1));

$(‘#quyuid‘).append(new Option("上海3", 2));

$(‘#quyuid‘).append(new Option("上海4", 3));

}

else if (data.value == "2") {

$(‘#quyuid‘).html(‘请选择区域‘)

$(‘#quyuid‘).append(new Option("广州1", 0));

$(‘#quyuid‘).append(new Option("广州2", 1));

$(‘#quyuid‘).append(new Option("广州3", 2));

$(‘#quyuid‘).append(new Option("广州4", 3));

}

else if (data.value == "3") {

$(‘#quyuid‘).html(‘请选择区域‘)

$(‘#quyuid‘).append(new Option("深圳1", 0));

$(‘#quyuid‘).append(new Option("深圳2", 1));

$(‘#quyuid‘).append(new Option("深圳3", 2));

$(‘#quyuid‘).append(new Option("深圳4", 3));

}

else if (data.value == "4") {

$(‘#quyuid‘).html(‘请选择区域‘)

$(‘#quyuid‘).append(new Option("杭州1", 0));

$(‘#quyuid‘).append(new Option("杭州2", 1));

$(‘#quyuid‘).append(new Option("杭州3", 2));

$(‘#quyuid‘).append(new Option("杭州4", 3));

}

layui.form.render("select");

//$.getJSON(‘@Url.Action("GetSelectCommunity", "Values", new { httproute = "DefaultApi", area = "" })‘ + "?id=" + data.value, function (data) {

// $(‘#ownscommunityId1‘).html(‘请选择社区/村‘)

// $.each(data, function (index, item) {

// $(‘#ownscommunityId1‘).append(new Option(item.Name, item.Code));// 下拉菜单里添加元素

// });

// layui.form.render("select");

//});

}

});

});

******注意：1.依赖加载模块： form(请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能)

2.标签 form必不可少  否则下拉框 复选框等相关样式无法显示