Question

我想进行一些更改，例如在选择下拉列表中的选项时显示/隐藏选项或添加图像源，但无法使该功能以某种方式工作......是否有某种技巧可以在没有按钮？

相关部分代码：

<select id="yrank" class="btn btn-primary" style="margin-right: 10px;">
    <option selected="selected" >Select</option>
    <option onclick="yRankFunc()" value="iron">Iron</option>
    <option value="bronze">Bronze</option>
    <option value="silver">Silver</option>
    <option value="gold">Gold</option>
    <option value="platinum">Platinum</option>
    <option value="diamond">Diamond</option>
</select>
    
<script>
    var yRankPic = document.getElementById("yRankPic");
    var nRankPic = document.getElementById("nRankPic");
    var yrankNo = document.getElementById("yRankNo").value;
    var yrank = document.getElementById("yrank").value;
    function yRankFunc(){
        console.log(yrank);
    }
</script>

Answer 1

需要更新值时需要读取该值。您当前在页面呈现时读取该值。您还想在选择和方法中使用更改事件，看看选择了什么。

var yrank = document.getElementById("yrank");

function yRankFunc() {
  if (yrank.value === 'bronze') {
    console.log('do something');
  } else {
    console.log(yrank.value);
  }
}

<select id="yrank" class="btn btn-primary" style="margin-right: 10px;" onchange="yRankFunc()">
  <option selected="selected">Select</option>
  <option value="iron">Iron</option>
  <option value="bronze">Bronze</option>
  <option value="silver">Silver</option>
  <option value="gold">Gold</option>
  <option value="platinum">Platinum</option>
  <option value="diamond">Diamond</option>
</select>

Answer 2

在 select 元素上添加 change 事件监听器，并检查目标的选定值。

const yrank = document.getElementById("yrank");
yrank.addEventListener("change", (e) => {
  switch (e.target.value) {
    case "bronze":
      console.log("bronze selected");
      break;
    case "silver":
      console.log("silver selected");
      break;
    case "gold":
      console.log("gold selected");
      break;
    default:
      console.log("others selected");
  }
});

<select id="yrank" class="btn btn-primary" style="margin-right: 10px;">
 <option selected="selected" >Select</option>
 <option onclick="yRankFunc()" value="iron">Iron</option>
 <option value="bronze">Bronze</option>
 <option value="silver">Silver</option>
 <option value="gold">Gold</option>
 <option value="platinum">Platinum</option>
 <option value="diamond">Diamond</option>
</select>

如何在没有按钮的情况下使用 onclick 下拉菜单

2 个答案: