前端根据勾选不同类型显示不同下拉框

如果勾选每周 就只显示一个周的的下拉框进行选择 选择每月就显1到三十一号 每季度也同理

img

选择时修改对应下拉框的disable属性为true/false,来启用/禁用.

引用jq

img


  <div>
    <label><input type="radio" name="type" value="1" checked="true">按周</label>
    <label><input type="radio" name="type" value="2">按月</label>
    <label><input type="radio" name="type" value="3">按季度</label>
  </div>
  <div>
   <!-- 根据 bindvisible 指定的控件记性控制 -->
   <!-- 根据 控件的值进行控制,可用多值,可在多个元素生效 -->
    <div bindvisible="type" bindvalue="1" class="bold">按周周周周周</div>
    <div bindvisible="type" bindvalue="2" style="display:none;" class="bold">按按按按按按按月</div>
    <div bindvisible="type" bindvalue="3" style="display:none;" class="bold">按季季季季季季季度</div>
  </div>
  <script>
  $(document).ready(function(){
      $(document).on('change', 'input', function () {
        var nm = $(this).attr('name');
        var val = $(this).val();
        if ($('input[bind=' + nm + ']').length > 0) {
            $('input[bind=' + nm + ']').each(function () {
                var v = $(this).attr('bindvalue').split(',')
                if (v.indexOf(val) < 0) {
                    $(this).attr('disabled', 'disabled');
                } else {
                    $(this).removeAttr('disabled');
                }
            })
        }
        if ($('*[bindvisible=' + nm + ']').length > 0) {
            $('*[bindvisible=' + nm + ']').each(function () {
                var v = $(this).attr('bindvalue').split(',')
                if (v.indexOf(val) < 0) {
                    $(this).hide()
                } else {
                    $(this).show();
                }
            })
        }
    })
  });
  </script>

根据上面选中的值 。切换下面select 就行。有点像 选项卡