如何填充辅助选择

时间：2017-08-27 20:01:01

标签： javascript css

如何根据用户在第一次选择时选择的内容填充辅助选择。

例如，如果用户选择＆＃34; Silver＆＃34;我想删除＆＃34; Silver＆＃34;来自第二次选择。

＆＃13;
＆＃13; 
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();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
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;
        }
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我创建了一个带有名称的Object，generateOptions是一个函数，它将徽章列表作为array of strings（Object.keys返回）为每个字符串创建选项。

updateSelect是一个获取select更新的函数，而省略的值，它会生成字符串数组并过滤掉省略值。 然后生成新选项。

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>

相关问题
最新问题