Javascript 在下拉列表中选择特定选项时更改属性

下面是我的代码： index.html

<img id="crypto-pic" src="./assets/img/cryptos/btc.png" alt="crypto" height="15" width="15">

     <select id="input-crypto" class="form-control">
        <option value="bitcoin">Bitcoin</option>
        <option value="ethereum">Ethereum</option>
...
...
...
      </select>

事实上，当在列表中选择以太坊时，图像不会更改为eth.png。

---

您能帮我一下吗，谢谢。

我会使用onChange事件和switch语句来减少代码和提高灵活性

$("#input-crypto").on("change", function(){
    var imgSrc;
    switch($(this).val()) {
      case "ethereum":
          imgSrc = './assets/img/cryptos/eth.png';
        break;
      case "anotherOption1":
          imgSrc = './assets/img/cryptos/xxx.png';
        break;
      case "anotherOption2":
          imgSrc = './assets/img/cryptos/xxx.png';
        break;
      default:
          imgSrc = './assets/img/cryptos/btc.png';
    }
    $('#crypto-pic').attr('src', imgSrc);
});

---

我会使用onChange事件和switch语句来减少代码和提高灵活性

$("#input-crypto").on("change", function(){
    var imgSrc;
    switch($(this).val()) {
      case "ethereum":
          imgSrc = './assets/img/cryptos/eth.png';
        break;
      case "anotherOption1":
          imgSrc = './assets/img/cryptos/xxx.png';
        break;
      case "anotherOption2":
          imgSrc = './assets/img/cryptos/xxx.png';
        break;
      default:
          imgSrc = './assets/img/cryptos/btc.png';
    }
    $('#crypto-pic').attr('src', imgSrc);
});

---

您错过了

比特币

和

以太坊

的单引号或双引号。此外，如果您在没有任何函数调用或侦听器的情况下运行脚本，那么它将无法工作

为了更好地理解，请使用

.change（）

函数跟踪选择的更改，然后检查最新选择的值

$("#input-crypto").change(function(){
  if($("#input-crypto").val() == "bitcoin"){
    $('#crypto-pic').attr('src', './assets/img/cryptos/btc.png');
  };

  if($("#input-crypto").val() == "ethereum"){
    $('#crypto-pic').attr('src', './assets/img/cryptos/eth.png');
  };
});

---

您错过了

比特币

和

以太坊

的单引号或双引号。此外，如果您在没有任何函数调用或侦听器的情况下运行脚本，那么它将无法工作

为了更好地理解，请使用

.change（）

函数跟踪选择的更改，然后检查最新选择的值

$("#input-crypto").change(function(){
  if($("#input-crypto").val() == "bitcoin"){
    $('#crypto-pic').attr('src', './assets/img/cryptos/btc.png');
  };

  if($("#input-crypto").val() == "ethereum"){
    $('#crypto-pic').attr('src', './assets/img/cryptos/eth.png');
  };
});

您可以使用

.on（）

函数来实现它

    $('#input-crypto').on('change', function () {
        var selectedOption = $(this).val();

        if (selectedOption == "bitcoin") {
            $('#crypto-pic').attr('src', './Content/img/cryptos/btc.png');
        }

        if (selectedOption == "ethereum") {
            $('#crypto-pic').attr('src', './assets/img/cryptos/eth.png');
        }
    });

您可以使用

.on（）

函数来实现它

    $('#input-crypto').on('change', function () {
        var selectedOption = $(this).val();

        if (selectedOption == "bitcoin") {
            $('#crypto-pic').attr('src', './Content/img/cryptos/btc.png');
        }

        if (selectedOption == "ethereum") {
            $('#crypto-pic').attr('src', './assets/img/cryptos/eth.png');
        }
    });

---

比特币

和

以太坊

周围的两种代码气味不是单引号或双引号表示它们是字符串。是否有同名的变量将这些字符串作为其值？否则这是一个语法错误。即使使用引号，也不起作用。

比特币

和

以太坊

周围的两个代码气味不是单引号或双引号，表示它们是字符串。是否有同名的变量将这些字符串作为其值？否则这是一个语法错误。即使使用引号，它也不起作用。默认值（如比特币）应始终为Last。我已编辑答案以在开关中显示其他选项。请记住在每个选项后也包括

break

，否则

default

将覆盖以前的选项default（如比特币）应始终为last我已编辑答案以在开关中显示其他选项。请记住在每个选项后面也包括

break

，否则

default

将覆盖前面的选项