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

Question

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

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

现在我希望当任何人选择Refinance时，必须隐藏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

您应该使用 change 事件和 show()/hide() 函数，请查看下面的基本示例。

希望这有帮助。

<小时/>

$(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>