layui根据不同radio选项切换表单内容

layui根据单选框选项不同，切换表单内容。具体效果如下所示。

layui根据不同radio选项切换表单内容

实现方式：

1、最顶部的radio单选按钮，必须赋予属性"lay-ignore"，如果layui的form渲染后，会导致点击事件失效。

2、像通常一样编写表单代码。下面分享一部分片段。

  1. <div class="form-group" data-storage-type="year-week" lay-filter="year-week">
  2.         <div class="layui-form-item">
  3.             <label class="layui-form-label">每隔</label>
  4.             <div class='layui-input-inline'>
  5.                 <input type="text" name="gap" required="required" value="{$vo.gap|default='1'}" class="layui-input">
  6.             </div>
  7.             <div class="layui-form-mid">年重复，</div>
  8.         </div>
  9.         <div class="layui-form-item">
  10.             <label class="layui-form-label">在</label>
  11.             <div class="layui-input-inline">
  12.                 <select name="month" style="width: 30%">
  13.                     <option value="0">请选择</option>
  14.                     <option value="1" {if isset($vo.month) and $vo.month eq 1}selected{/if}>一月</option>
  15.                     <option value="2" {if isset($vo.month) and $vo.month eq 1}selected{/if}>二月</option>
  16.                     <option value="3" {if isset($vo.month) and $vo.month eq 1}selected{/if}>三月</option>
  17.                     <option value="4" {if isset($vo.month) and $vo.month eq 1}selected{/if}>四月</option>
  18.                     <option value="5" {if isset($vo.month) and $vo.month eq 1}selected{/if}>五月</option>
  19.                     <option value="6" {if isset($vo.month) and $vo.month eq 1}selected{/if}>六月</option>
  20.                     <option value="7" {if isset($vo.month) and $vo.month eq 1}selected{/if}>七月</option>
  21.                     <option value="8" {if isset($vo.month) and $vo.month eq 1}selected{/if}>八月</option>
  22.                     <option value="9" {if isset($vo.month) and $vo.month eq 1}selected{/if}>九月</option>
  23.                     <option value="10" {if isset($vo.month) and $vo.month eq 1}selected{/if}>十月</option>
  24.                     <option value="11" {if isset($vo.month) and $vo.month eq 1}selected{/if}>十一月</option>
  25.                     <option value="12" {if isset($vo.month) and $vo.month eq 1}selected{/if}>十二月</option>
  26.                 </select>
  27.             </div>
  28.             <div class="layui-input-inline">
  29.                 <select name="week" class="layui-input-block" style="width: 30%">
  30.                     <option value="0">请选择</option>
  31.                     <option value="1" {if isset($vo.month) and $vo.month eq 1}selected{/if}>第一周</option>
  32.                     <option value="2" {if isset($vo.month) and $vo.month eq 1}selected{/if}>第二周</option>
  33.                     <option value="3" {if isset($vo.month) and $vo.month eq 1}selected{/if}>第三周</option>
  34.                     <option value="4" {if isset($vo.month) and $vo.month eq 1}selected{/if}>第四周</option>
  35.                 </select>
  36.             </div>
  37.             <div class="layui-input-inline">
  38.                 <select name="weekday" class="layui-input-block" style="width: 30%">
  39.                     <option value="0">请选择</option>
  40.                     <option value="monday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期一</option>
  41.                     <option value="tuesday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期二</option>
  42.                     <option value="wednesday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期三</option>
  43.                     <option value="thursday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期四</option>
  44.                     <option value="friday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期五</option>
  45.                     <option value="saturday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期六</option>
  46.                     <option value="sunday" {if isset($vo.month) and $vo.month eq 1}selected{/if}>星期日</option>
  47.                 </select>
  48.             </div>
  49.         </div>
  50.         <div class="layui-form-item">
  51.             <label class="layui-form-label">开始时间</label>
  52.             <div class="layui-input-inline">
  53.                 <input type="time" name="begin_time" required="begin_time" value="{$vo.begin_time|default='00:00'}" class="layui-input">
  54.             </div>
  55.         </div>
  56.     </div>

特别提示：每一个radio点击后需要切换的表单内容，需要用“form-group”包括起来。并赋予一个自定义的属性便于DOM选择器选择。上述示例中增加的属性是“data-storage-type”。

3、JS部分

  1. <script>
  2.     (function () {
  3.         window.form.render();
  4.         buildForm('{$vo.type|default="day"}');
  5.         $('[name=type]').on('click', function () {
  6.             buildForm($('[name=type]:checked').val())
  7.         });
  8.         // 表单显示编译
  9.         function buildForm(value) {
  10.             var $tips = $("[data-storage-type='" + value + "']");
  11.             $("[data-storage-type]").not($tips.show()).hide();
  12.         }
  13.         //按年下级radio切换
  14.         buildYear('{$vo.year_type|default="week"}');
  15.         $('[name=year_type]').on('click', function () {
  16.             buildYear($('[name=year_type]:checked').val())
  17.         });
  18.         function buildYear(value){
  19.             var $tips = $("[data-storage-type=year-" + value + "]");
  20.             $("[data-storage-type]").not($tips.show()).hide();
  21.             $("[data-storage-type='year']").show();
  22.             //window.form.render(null,'year-'+value);
  23.         }
  24.         //按月下级radio切换
  25.         buildMonth('{$vo.month_type|default="day"}');
  26.         $('[name=month_type]').on('click',function (){
  27.             buildMonth($('[name=month_type]:checked').val());
  28.         })
  29.         function buildMonth(value){
  30.             var $tips = $("[data-storage-type=month-" + value + "]");
  31.             $("[data-storage-type]").not($tips.show()).hide();
  32.             $("[data-storage-type='month']").show();
  33.         }
  35.     })();

如果是只有一级切换，只需要一个buildForm即可。因为在具体案例中采用了多级radio选项，故而多写了两个，并且在多级radio点击切换的时候，还要保证第二级radio的显示。

至于下拉选择框，选择后切换表单内容可以依照上述示例进行简单修改即可实现。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！