Изменить текст в метке на вариант из меню выбора - PullRequest
Новая
       14

Изменить текст в метке на вариант из меню выбора

0 голосов
/ 17 апреля 2020

Это мое пользовательское меню выбора: 

<select name="bankSelect" id="bankSelect" onchange="dispchange(this.form.bankSelect)">
    <option>EQUIFAX</option>
    <option value = 5 >EQUIFAX</option>
    <option value = 6>TRANSUNION</option>
    <option value = 7>EXPERIAN</option>
    <option value = 8>BANK OF AMERICA</option>
    <option value = 9>WELLS FARGO</option>
    <option value = 10>CITIBANK</option>
    <option value = 11>JPMORGAN</option>
    <option value = 12>NAVIENT</option>
    <option value = 13>CAPITAL ONE</option>
    <option value = 14>U.S BANCORP</option>
</select>

Это мой ярлык: 

<div class="info">
   <label>Bank: </label>
   <label id="bank">EQUIFAX</label><br>
</div>

Мне нужно изменить текст внутри ярлыка с банком ID = 'на опцию i выберите из меню, которое я выше.

Так что, если я выберу опцию со значением 9, моя метка должна изменить текст, который она отображает, по умолчанию, 'EQUIFAX', чтобы затем отобразить 'WELLS FAR GO'.

Это то, что я пробовал в моем java -скрипте, основанном на поиске похожих вопросов: 

function dispchange(bankSelect) {
    var bsel_index = bankSelect.selectedIndex;
    var bselin = bankSelect.options[bsel_index].value;
    if(bselin == '6')
      document.getElementById("bank").innerHTML = 'Transunion';
    else if(opcao == '1')
      document.getElementById('complemento').innerHTML = 'Titulo';
 }

Это ничего не делает. Что я делаю неправильно? Есть ли лучший способ / другой способ изменить ярлык? Могу ли я использовать что-то кроме метки для отображения своего выбора из меню выбора? Если да, как я могу убедиться, что всегда отображается выбранный в данный момент выбор?

Ответы [ 2 ]

2 голосов
/ 17 апреля 2020

используйте option.text вместо option.value: 

function dispchange() {
    var el = document.getElementById('bankSelect');
    document.getElementById('bank').innerHTML = el.options[el.selectedIndex].text;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
    <option>EQUIFAX</option>
    <option value="5">EQUIFAX</option>
    <option value="6">TRANSUNION</option>
    <option value="7">EXPERIAN</option>
    <option value="8">BANK OF AMERICA</option>
    <option value="9">WELLS FARGO</option>
    <option value="10">CITIBANK</option>
    <option value="11">JPMORGAN</option>
    <option value="12">NAVIENT</option>
    <option value="13">CAPITAL ONE</option>
    <option value="14">U.S BANCORP</option>
</select>
<div class="info">
   <label>Bank: </label>
   <label id="bank">EQUIFAX</label><br>
</div>
1 голос
/ 17 апреля 2020 

function dispchange(bankSelect) {
  console.log(document.getElementById("bankSelect").value)
  document.getElementById('bank').innerHTML = document.getElementById("bankSelect").value;
    

 }
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
    <option value="EQUIFAX">EQUIFAX</option>
    <option value="TRANSUNION">TRANSUNION</option>
    <option value ="EXPERIAN">EXPERIAN</option>
    <option value= "BANK OF AMERICA">BANK OF AMERICA</option>
    <option value ="WELLS FARGO">WELLS FARGO</option>
</select>

<div class="info">
   <label>Bank: </label>
   <label id="bank">EQUIFAX</label><br>
</div>

Если вы можете изменить значение опций с номера на имя банка, то следующий код будет работать так, как вам нужно. В противном случае вам нужно создать массив или объект с номерами и именами банков. Работает ли вышеуказанный код для вас?

...