Question

我正在努力解决一个需要动态加载字段名称的概念。我有一个下拉选项，如下面的代码

<label>Payer Type*</label>
 <span class="inherit" style="width: 175px">
      <select class="drop-down" style="width: 175px">
           <option disabled selected value >Select</option>
           <option value="card">Credit Card</option>
           <option value="bank">Bank Account</option>
       </select>
  </span>

从上述选项中，如果我选择信用卡，我希望标签更改为卡号，卡名称CVV，如果我选择银行帐户，我需要标签为帐号，帐号如下所示。

<div class="col-md-2 p-l-5 p-b-10" style="margin-left: -20px">
                <label>**Card Number* / Account number**</label>
                <span class="inherit"><input class="form-input" style="width:200px;" ></span>
            </div>

            <div class="col-md-2 p-l-5 p-b-10">
                <label>**Card Name / Account name**</label>
                <span class="inherit"><input class="form-input" style="width:200px;"></span>
            </div>

如何根据我们从下拉列表中使用javascript选择的选项传递参数并更改标签。？我是javascript的新手，我的尝试无法传递参数并完成工作。非常感谢任何帮助。感谢。

Answer 1

您可以制作两个不同的div块，其中包含卡号，卡名CVV以及其他包含帐号，帐号名称。并且选择的onchange事件只显示隐藏并显示相应的div块

Answer 2

您可以使用onchange选择事件。当选择任何选项时，将调用javascript函数changeLabel(select)。选中该选项并根据所选选项更改标签文本（您需要在标签中添加id以便从javascript访问它）

function changeLabel(select){
  if(select.value == "card"){
     document.getElementById('lbl_data').innerHTML="**Card Number* / Account number**";
  }else if(select.value == "bank"){
    document.getElementById('lbl_data').innerHTML="**Card Name / Account name**";
  }
}

            
<label>Payer Type*</label>
 <span class="inherit" style="width: 175px">
      <select class="drop-down" style="width: 175px" onchange="changeLabel(this)">
           <option disabled selected value >Select</option>
           <option value="card">Credit Card</option>
           <option value="bank">Bank Account</option>
       </select>
  </span>
  
  <div class="col-md-2 p-l-5 p-b-10" style="margin-left: -20px">
                <label id="lbl_data">**Card Number* / Account number**</label>
                <span class="inherit"><input class="form-input" style="width:200px;" ></span>
            </div>

根据下拉选择更改标题（标签）

2 个答案: