如何根据每个选择值更改表单字段

Question

我想根据所选值替换表单字段。为此，我添加了一个jquery但不幸的是，它仅适用于一个值。而对于其他选择，它仍然是相同的。这是我的代码：

<div class="col-md-6">
    <div class="form-group">
        <label for="card_name">Card Name</label>
            <select id="card" type="text"  name="card_name">
              <option value="">--Select--</option>
              <option value="A">A</option>
              <option value="B">B</option>
              <option value="C">C</option>
              <option value="D">D</option>
              <option value="E">E</option>
              <option value="F">F</option>

           </select>
        </div>
    </div>
<div class="col-md-4" id="access">
    <div  class="form-group">
        <label for="access">Access Code</label>
            <input type="password" class="form-control" name="access" style="color:#fff;border: 2px solid #fff;">
    </div>
</div>
<div id="amount" class="col-md-4" style="display:none">
    <div  class="form-group">
        <label for="amount">Amount</label>
            <input type="text" class="form-control" name="amount" style="color:#fff;border: 2px solid #fff;">
    </div>
</div>

jQuery：

$(document).ready(function(){
    $('#card').on('change', function() {  
        var name=this.value;
      if (( name == "A" ) || (name=="B") || (name=="C"))
      {
        $("#access").hide();
        $("#amount").show();
      }
      else
      {
        $("#access").show();
        $("#amount").hide();
      }

    });
});

Answer 1

每个==你需要一个双等号（if）

if ((name == "A") || (name == "B") || (name == "C")) {

Answer 2

编写所有这些代码行只是太多的工作......这是一个有点不同的方法;）

HTML：

<select id="card" name="card_name">
   <option data-hide='' data-show='' value="">--Select--</option>
   <option data-hide='#access' data-show='#amount' value="A">A</option>
   <option data-hide='#access' data-show='#amount' value="B">B</option>
   <option data-hide='#access' data-show='#amount' value="C">C</option>
   <option data-hide='#amount' data-show='#access' value="D">D</option>
   <option data-hide='#amount' data-show='#access' value="E">E</option>
   <option data-hide='#amount' data-show='#access' value="F">F</option>
</select>

JQuery的：

$(document).ready(function(){
   $('#card').change(function () {
       $($(this).children("option:selected").attr("data-hide")).hide();
       $($(this).children("option:selected").attr("data-show")).show();
   });
});