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

Question

所以我的代码如下： 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>

script.js :

if($("#input-crypto option:selected").text() == bitcoin){
  $('#crypto-pic').attr('src', './assets/img/cryptos/btc.png');
};

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

事实上，当在列表中选择 Ethereum 时，图像不会变为 eth.png。能帮帮我吗，谢谢。

Answer 1

我会使用 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);
});

Answer 2

您在 bitcoin 和 ethereum 周围遗漏了单引号或双引号。此外，如果您运行没有任何函数调用或侦听器的脚本，它将无法工作。

为了更好地理解，请使用 .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');
  };
});

Answer 3

可以使用.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');
        }
    });

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

Change Attribut when Specific Option is Selected in Dropdown List

javascript

html

jquery

html-select