セカンダリセレクトの作成方法

Question

セカンドセレクトにユーザーが選択した内容に基づいてセカンダリセレクトを設定する方法

たとえば、ユーザーが「シルバー」を選択した場合、2番目の選択から「シルバー」を削除します。

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>

Answer 2

私は名前でオブジェクトを作成しました。generateOptionsは、b adgesリストをarray of strings（Object.keysが返す）とすると、文字列ごとにオプションが作成されます。

updateSelectは、の値をに設定しない場合は、値を除外して除外します。 新しいオプションが生成されます。

const badges = { 
 
    bronze: { 
 
    img: "https://elo-boost.net/images/tiers/bronze_5.png", 
 
    pret: 10 
 
    }, 
 
    silver: { 
 
    img: "https://elo-boost.net/images/tiers/silver_5.png", 
 
    pret: 20 
 
    }, 
 
    gold: { 
 
    img: "https://elo-boost.net/images/tiers/gold_5.png", 
 
    pret: 30 
 
    }, 
 
    platinum: { 
 
    img: "https://elo-boost.net/images/tiers/platinum_5.png", 
 
    pret: 40 
 
    }, 
 
    diamond: { 
 
    img: "https://elo-boost.net/images/tiers/diamond_5.png", 
 
    pret: 50 
 
    }, 
 
    master: { 
 
    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() { 
 
    sm.innerHTML = badges[select1.value].pret + badges[select2.value].pret; 
 
} 
 

 
// eventListener pe select1 
 

 
function generateOptions(select, badges) { 
 
    select.options.length = 0; 
 
    badges.forEach((type, index) => { 
 
    select.options[index] = new Option(type, type); 
 
    }) 
 
} 
 

 
function updateSelect(select, otherSelectValue) { 
 
    const badgesKeys = Object.keys(badges).filter(key => key !== otherSelectValue); 
 

 
    generateOptions(select, badgesKeys); 
 

 
} 
 

 
generateOptions(select1, Object.keys(badges)); 
 
generateOptions(select2, Object.keys(badges)); 
 

 
select1.addEventListener("change", function() { 
 
    const option = badges[this.value]; 
 
    imgleft.src = option.img; 
 
    pret1.textContent = option.pret 
 
    smm(); 
 
    updateSelect(select2, this.value); 
 
}); 
 

 
// eventListener pe select2 
 

 
select2.addEventListener("change", function() { 
 
    const option = badges[this.value]; 
 
    imageright.src = option.img; 
 
    pret2.textContent = option.pret 
 
    smm(); 
 
    updateSelect(select1, this.value); 
 
});

<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"></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"></select> 
 
</div> 
 
<h1>Sum</h1>