Layuiフレームワークのselectラベルajaxリクエスト
layui
Layuiフレームワークのパッケージの各種ラベルは便利で、美しく、多くのニーズを満たすことができます.
ただしlayuiフレームワークではselectタグは元のajaxで要求できません
ここでは少しの修正が必要で、ニーズを満たすことができます.
ajax
htmlコード
まずselectに値を設定します
ajax
ここにselectがonchangeをトリガーしたときの関数の方法を書きます
に注意
リクエストが完了するたびに前回のリクエスト結果を空にします.そうしないと、結果は
効果図は置かないで、必要に応じて自分で修正します
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ラベルに挿入されます.そうしないと、クエリーの結果が正常に表示されません.効果図は置かないで、必要に応じて自分で修正します