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

【问题标题】：How to change form field according to each select value如何根据每个选择值更改表单字段
【发布时间】：2018-09-03 20:30:10
【问题描述】：

我想根据选择的值替换一个表单域。为此，我添加了一个 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();
      }

    });
});

【问题讨论】：

标签： jquery select onchange

【解决方案1】：

每个if 都需要一个双等号 (==)

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

【讨论】：

你可以在这里看到jsfiddle.net/luenib/at0wy2e5 它对我有用。也许是不同版本的 jQuery？也许onload 比ready 更好？

【解决方案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();
   });
});

【讨论】：