Question

我是JS的新手，现在我有一个表格总共我有13个领域，我还有一个名为贷款购买的下拉列表

<label>Loan Purpose</label>
    <select class="form-control">
        <option value="1">Purchase</option>
        <option value="2">Refinance</option>
    </select>

现在我希望当有人选择再融资然后 3字段必须隐藏并且一个标签必须重命名，并且当它选择购买时然后它保持相同的13场。现在最好的选择是什么。

JS

$(document).ready(function(){ 
         $("#state").change(function() { // foo is the id of the other select box 
              if ($(this).val() != "notinoz") { 
                  $("#foo").show(); 
              } else { 
                  $("#foo").hide(); 
              } 
         }); 
});

Answer 1

You should use change event and show()/hide() functions, check basic example bellow.

Hope this helps.

$(document).ready(function(){ 
  $("body").on('change', "#loan_purpose", function() { 
    
    if ($(this).val() == 1) {  //Purchase case
        $("#purchase_fields").show(); 
        $("#refinance_fields").hide(); 
    }else{ //Refinance case
        $("#refinance_fields").show(); 
        $("#purchase_fields").hide(); 
    } 
  }); 
});

#refinance_fields{
   display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Loan Purpose</label>

<select class="form-control" id="loan_purpose">
  <option value="1">Purchase</option>
  <option value="2">Refinance</option>
</select>
<br/><br/>
<div id='purchase_fields'>
    <input type="text" value='purchase_field 1'/>
    <input type="text" value='purchase_field 2'/>
    <input type="text" value='purchase_field 3'/>
</div>
  
<div id='refinance_fields'>
    <input type="text" value='refinance_field 1'/>
    <input type="text" value='refinance_field 2'/>
    <input type="text" value='refinance_field 3'/>
</div>

在下拉值更改时，某些字段将隐藏，而某些字段将被新添加

1 个答案: