Изменение заголовка (меток) в зависимости от выпадающего списка

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

Вы можете использовать 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>

Answer 2

Вы можете сделать два разных блока div: один содержит номер карты, имя карты CVV, а другой содержит номер счета, имя учетной записи. И onchange событие выбора просто отобразить скрыть и показать соответствующий блок div