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("");				
					if(msg == ''){
     
						$("#place").append("");
						form.render('select');
					}else{
     
						$.each(msg, function(key, val) {
     
							$("#place").append(''+val.name+'</option>');
							form.render('select');
						});
					}
				}
			});
			});
		});
		
	</script>

に注意$("#place").empty();
リクエストが完了するたびに前回のリクエスト結果を空にします.そうしないと、結果はform.render('select');に重ねられ、クエリーの内容がselectラベルに挿入されます.そうしないと、クエリーの結果が正常に表示されません.
効果図は置かないで、必要に応じて自分で修正します