Question

我有这个下拉列表

<div class="box-body">
  <div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
      <div class="col-sm-5">
        <select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
          <option></option>
          <option value= "Yes">Yes</option>
          <option value= "No">No</option>
        </select>
      </div>
  </div>
</div>

我想隐藏这个，

<div class="box-body">
  <div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
      <div class="col-sm-5">
        <select class="form-control" name = "SOLO_P">
          <option></option>
          <option value= "Yes">Yes</option>
          <option value= "No">No</option>
        </select>
      </div>
  </div>
</div>

然后当我在第一个下拉列表中选择“是”时，它将显示第二个下拉列表。我怎么能这样做？

Answer 1

我做的是

            <div class="box-body">
              <div class="form-group">
                <label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
                  <div class="col-sm-5">
                    <select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
                      <option></option>
                      <option value= "Yes">Yes</option>
                      <option value= "No">No</option>
                    </select>
                  </div>
              </div>
            </div>

            <div class="solop box-body" style="display:none" id = "Yes">
              <div class="form-group">
                <label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
                  <div class="col-sm-5">
                    <select class="form-control" name = "SOLO_P">
                      <option></option>
                      <option value= "Yes">Yes</option>
                      <option value= "No">No</option>
                    </select>
                  </div>
              </div>
            </div>

然后我的javascript就是

$(function() {
    $('#LEAVE_ENTITLED').change(function(){
        $('.solop').hide();
        $('#' + $(this).val()).show();
    });
});

Answer 2

默认情况下，在页面加载时隐藏第二个下拉列表。然后检查第一个下拉值是否为“是”并删除第二个下拉列表的隐藏类。

$('#LEAVE_ENTITLED').on('change', function() {
  var $this = $(this),
    $dropdown2 = $('#ddlSecond');

  if ($this.val() == 'Yes') {
    $dropdown2.removeClass('hide');
  } else {
    $dropdown2.addClass('hide');
  }
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
  <div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
    <div class="col-sm-5">
      <select class="form-control" name="LEAVE_ENTITLED" id="LEAVE_ENTITLED">
        <option></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </div>
  </div>
</div>

<div class="box-body hide" id="ddlSecond">
  <div class="form-group">
    <label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?
      <br>(If leave entitled)</label>
    <div class="col-sm-5">
      <select class="form-control" name="SOLO_P">
        <option></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </div>
  </div>
</div>

在选择值codeigniter上显示div

2 个答案: