javascript - 如何填充辅助选择

Question

我如何根据用户在第一个选择中的选择填充第二个选择。

例如，如果用户选择“Silver”，我想从第二个选择中删除“Silver”。

var b = {
  img: "https://elo-boost.net/images/tiers/bronze_5.png",
  pret: 10
};
var s = {
  img: "https://elo-boost.net/images/tiers/silver_5.png",
  pret: 20
};
var g = {
  img: "https://elo-boost.net/images/tiers/gold_5.png",
  pret: 30
};
var p = {
  img: "https://elo-boost.net/images/tiers/platinum_5.png",
  pret: 40
};
var d = {
  img: "https://elo-boost.net/images/tiers/diamond_5.png",
  pret: 50
};
var m = {
  img: "https://elo-boost.net/images/tiers/master_1.png",
  pret: 60
};

var select1 = document.getElementById("sel1");
var select2 = document.getElementById("sel2");
var imgleft = document.getElementById("limg");
var imageright = document.getElementById("rimg");
var pret1 = document.getElementById("pret1");
var pret2 = document.getElementById("pret2");

var sm = document.querySelector("h1");

function smm() {
  var ne = document.querySelector("#pret1").innerHTML;
  var wo = document.querySelector("#pret2").innerHTML;
  sm.innerHTML = parseInt(ne) + parseInt(wo);
}

// eventListener pe select1

select1.addEventListener("change", function() {
  if (this.value == 1) {
    imgleft.src = b.img;
    pret1.textContent = b.pret;
  }
  if (this.value == 2) {
    imgleft.src = s.img;
    pret1.textContent = s.pret;
  }
  if (this.value == 3) {
    imgleft.src = g.img;
    pret1.textContent = g.pret;
  }
  if (this.value == 4) {
    imgleft.src = p.img;
    pret1.textContent = p.pret;
  }
  if (this.value == 5) {
    imgleft.src = d.img;
    pret1.textContent = d.pret;
  }
  smm();
  populate();
});

// eventListener pe select2

select2.addEventListener("change", function() {
  if (this.value == 1) {
    imageright.src = b.img;
    pret2.textContent = b.pret;
  }
  if (this.value == 2) {
    imageright.src = s.img;
    pret2.textContent = s.pret;
  }
  if (this.value == 3) {
    imageright.src = g.img;
    pret2.textContent = g.pret;
  }
  if (this.value == 4) {
    imageright.src = p.img;
    pret2.textContent = p.pret;
  }
  if (this.value == 5) {
    imageright.src = d.img;
    pret2.textContent = d.pret;
  }
  smm();
  populate();
});

<div style="float:left; width: 50%;">
  <div>
    <img src="https://elo-boost.net/images/tiers/silver_5.png" id="limg">
    <p id="pret1" style="display:none;"></p>
  </div>
  <select id="sel1" class="slt1">
    <option value="0">current rank</option>
    <option value="1">BRONZE</option>
    <option value="2">SILVER</option>
    <option value="3">GOLD</option> 
    <option value="4">PLATINIUM</option>  
    <option value="5">DIAMOND</option>
  </select>
</div>


<div style="float:left; width: 50%;">
  <div>
    <img src="https://elo-boost.net/images/tiers/silver_5.png" id="rimg">
    <p id="pret2" style="display:none;"></p>
  </div>
  <select id="sel2" class="slt2">
    <option value="0">desire rank</option>
    <option value="1">BRONZE</option>
    <option value="2">SILVER</option>
    <option value="3">GOLD</option> 
    <option value="4">PLATINIUM</option>  
    <option value="5">DIAMOND</option>
  </select>
</div>
<h1>Sum</h1>

Answer 1

检查这个片段我认为这就是你想要的。(不太熟悉 LOL 这就是为什么排名或可能是错误的)

var ranks = {
    Bronze: ["Silver", "Gold", "Platinum", "Diamond"],
    Silver: ["Gold", "Platinum", "Diamond"],
    Gold: ["Platinum", "Diamond"],
    Platinum: ["Diamond"],
    Diamond: ["Diamond"]
}

    function desireRank(value) {
        if (value.length == 0) document.getElementById("desiredRank").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (desiredRankId in ranks[value]) {
                catOptions += "<option>" + ranks[value][desiredRankId] + "</option>";
            }
            document.getElementById("desiredRank").innerHTML = catOptions;
        }
    }

<select name="currentRank" id="currentRank" onChange="desireRank(this.value);">
    <option value="" disabled selected>Select</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>
<select name="desiredRank" id="desiredRank">
    <option value="" disabled selected>Select</option>
</select>