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

Question

我正在为需要能够动态加载字段名称的概念而苦苦挣扎。我有一个下拉菜单 selection，如下代码

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

从上面的选项中，如果我 select 信用卡，我希望标签更改为卡号、卡名 CVV，如果我 select 银行账户，我需要将标签更改为帐号, 账户名如下图

<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 从下拉列表中 select 选项传递参数和更改标签？我是 javascript 的新手，我的尝试未能传递参数并完成工作。非常感谢对此的任何帮助。谢谢

Answer 1

您可以制作两个不同的div块，一个包含卡号、卡名CVV，其他包含账号、账户名。 select 的 onchange 事件只显示隐藏和显示相应的 div 块

Answer 2

您可以使用 select 的 onchange 事件。当在 selected 中更改任何选项时，将调用 javascript 函数 changeLabel(select)。选中该选项并根据 selected 选项更改标签文本（您需要将 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>

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

Changing title (labels) based on dropdown selection

html

javascript

aurelia