将标签中的文本更改为选择菜单中的选项

Question

这是我的自定义 select 菜单：

<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='bank 标签内的文本更改为上面菜单 i 中的选项 i select。

因此，如果我选择值为 9 的选项，那么我的标签应该更改它默认显示的文本，'EQUIFAX' 然后显示 'WELLS FARGO'。

这是我在我的 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';
 }

它什么都不做。我究竟做错了什么？有没有更好的方法/另一种方法来更改标签？我可以使用标签以外的东西来显示我在 selection 菜单中的选择吗？如果是这样，我如何确保始终显示当前 selected 的选择？

Answer 1

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>

如果您可以将选项的值从数字更改为银行名称，那么下面的代码将按您的需要工作。否则，您必须创建一个包含数字和银行名称的数组或对象。上面的代码对你有用吗？

Answer 2

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

将标签中的文本更改为选择菜单中的选项

Change text within Label to option from selection menu

html

javascript

select

label

drop-down-menu