时间戳

首页 > 解决方案 > 如何在没有按钮的下拉菜单上使用onclick

javascript - 如何在没有按钮的下拉菜单上使用onclick

问题描述

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

相关代码部分：

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

标签： javascripthtml

解决方案

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

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>

推荐阅读