显示上选择值一个div笨

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>