layui:选择框更改页面没反应

参考说明:http://www.layui.com/doc/modules/form.html

更新渲染

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数(type)值 描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染

例子layui.code

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

实例

jsp

<div class="layui-form-item">
    <label class="layui-form-label">等级:</label>
    <div class="layui-input-block">
        <input type="radio" name="Level" value="" title="无"/> 
        <input type="radio" name="Level" value="5" title="Ⅴ级"/>
        <input type="radio" name="Level" value="4" title="Ⅳ级"/>
        <input type="radio" name="Level" value="3" title="Ⅲ级"/>
        <input type="radio" name="Level" value="2" title="Ⅱ级"/>
        <input type="radio" name="Level" value="1" title="Ⅰ级"/> 
    </div>
</div>

js

var level ='';
switch(data.Level)
{
    case 'Ⅰ级':
        level = '1';
        break;
    case 'Ⅱ级':
        level = '2';
        break;
    case 'Ⅲ级':
        level = '3';
        break;
    case 'Ⅳ级':
        level = '4';
        break;
    case 'Ⅴ级':
        level = '5';
        break;
    default:
        break;
            
}
$("input[type='radio'][name='Level'][value='"+level+"']").prop("checked","checked");
layui.form.render('radio');

jsp

<div class="layui-form-item">
    <label class="layui-form-label">类型:</label>
    <div class="layui-input-block">
        <select id="Type" lay-verify="required" lay-filter="aihao">
            <option value="">无</option>
            <option value="1">天</option>
            <option value="2">地</option>
            <option value="3">玄</option>
            <option value="4">黄</option>
        </select>
    </div>
</div>

js

switch(data.Type)
{
    case '天':
        $("#Type").val('1');
        break;
    case '地':
        $("#Type").val('2');
        break;
    case '玄':
        $("#Type").val('3');
        break;
    case '黄':
        $("#Type").val('4');
        break;
    default:
        $("#Type").val('0');
        break;
            
}
layui.form.render('select');

猜你喜欢

转载自blog.csdn.net/m0_38084243/article/details/81289179