layui框架中的select标签ajax请求

layui

layui框架中的封装的各种标签很方便，美观，能满足大多数需求

但是layui框架中select标签，不能使用原始的ajax进行请求

这里需要进行稍微的修改，就可满足需求

ajax

html代码

首先 我们要先给select设置一个值

lay-filter="scienceid"

 	<div class="layui-form-item  layui-row layui-col-xs12">
            <label class="layui-form-label required">景区名称</label>
            <div class="layui-input-block">
                <select name="scienceid" lay-verify="required" lay-verify="required" onchange="ajax()" lay-filter="scienceid">
					<option value="">请选择</option>
					{foreach $list as $vo}
						<option value="{$vo.id}" >{$vo.name|raw}</option>
					{/foreach}
                </select>
            </div>
        </div>
		<div class="layui-form-item  layui-row layui-col-xs12">
            <label class="layui-form-label required">景点名称</label>
            <div class="layui-input-block" >
                <select id="place" name="placeid" >
				
				<option value="">请选择景点名称</option>
			</select>
				
            </div>
        </div>

ajax

form.on('select(scienceid)', function(data){ }

然后在这里面写当select触发onchange时的函数方法

	<script>
	layui.use(['layer', 'jquery', 'form'], function () {
			var layer = layui.layer,
					$ = layui.jquery,
					form = layui.form;
 
			form.on('select(scienceid)', function(data){
				$.ajax({
				type:"post",
				url:'science',
				data:{science:data.value},//这里data传递过去的是序列化以后的字符串
				success:function(msg){
					$("#place").empty();				
					$("#place").append("<option value=''>请选择景点名称</option>");				
					if(msg == ''){
						$("#place").append("<option value=''>暂无景点</option>");
						form.render('select');
					}else{
						$.each(msg, function(key, val) {
							$("#place").append('<option value='+val.id+'>'+val.name+'</option>');
							form.render('select');
						});
					}
				}
			});
			});
		});
		
	</script>

注意

$("#place").empty();

每次请求完将上一次的请求结果清空，否则结果会一直叠加
form.render('select');
将查询的内容放入select标签中，否则查询出来的结果无法正常显示

效果图就不放了，根据需求自行修改