What is the best way to fill out a secondary drop

Question

What is the best way to fill out a secondary drop

Is it possible to dynamically populate a secondary selection based on the User's choice in the first selection?

For example, if the user selects "Silver," how can I automatically remove "Silver" from the second selection options?

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 sum() {
  var ne = document.querySelector("#pret1").innerHTML;
  var wo = document.querySelector("#pret2").innerHTML;
  sm.innerHTML = parseInt(ne) + parseInt(wo);
}

// Event listener on 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;
  }
  sum();
});

// Event listener on 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;
  }
  sum();
});

<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">PLATINUM</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">desired rank</option>
    <option value="1">BRONZE</option>
    <option value="2">SILVER</option>
    <option value="3">GOLD</option> 
    <option value="4">PLATINUM</option>  
    <option value="5">DIAMOND</option>
  </select>
</div>
<h1>Sum</h1>

javascript css

Answer 1

Answer №1

If you're looking for a snippet, I believe this is what you need. (I'm not very familiar with LOL, so the ranks may be incorrect)

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

If you're looking for a snippet, I believe this is what you need. (I'm not very familiar with LOL, so the ranks may be incorrect)

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 3

Answer №2

I've designed an Object containing the names, generateOptions is a function that retrieves the badges list as an array of strings (retrieved using Object.keys) and creates an option for each string.

updateSelect is a function that takes a select element to update and the value to exclude. It generates the array of strings and filters out the excluded value, then generates the new options.

const badges = {
  bronze: {
    img: "https://elo-boost.net/images/tiers/bronze_5.png",
    price: 10
  },
  silver: {
    img: "https://elo-boost.net/images/tiers/silver_5.png",
    price: 20
  },
  gold: {
    img: "https://elo-boost.net/images/tiers/gold_5.png",
    price: 30
  },
  platinum: {
    img: "https://elo-boost.net/images/tiers/platinum_5.png",
    price: 40
  },
  diamond: {
    img: "https://elo-boost.net/images/tiers/diamond_5.png",
    price: 50
  },
  master: {
    img: "https://elo-boost.net/images/tiers/master_1.png",
    price: 60
  }
};

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

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

function calculateTotalPrice() {
  total.innerHTML = badges[select1.value].price + badges[select2.value].price;
}

// eventListener on 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;
  price1.textContent = option.price;
  calculateTotalPrice();
  updateSelect(select2, this.value);
});

// eventListener on select2

select2.addEventListener("change", function() {
  const option = badges[this.value];
  imageright.src = option.img;
  price2.textContent = option.price;
  calculateTotalPrice();
  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="price1" 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="price2" style="display:none;"></p>
  </div>
  <select id="sel2" class="slt2"></select>
</div>
<h1>Total Price</h1>

Answer 4

I've designed an Object containing the names, generateOptions is a function that retrieves the badges list as an array of strings (retrieved using Object.keys) and creates an option for each string.

updateSelect is a function that takes a select element to update and the value to exclude. It generates the array of strings and filters out the excluded value, then generates the new options.

const badges = {
  bronze: {
    img: "https://elo-boost.net/images/tiers/bronze_5.png",
    price: 10
  },
  silver: {
    img: "https://elo-boost.net/images/tiers/silver_5.png",
    price: 20
  },
  gold: {
    img: "https://elo-boost.net/images/tiers/gold_5.png",
    price: 30
  },
  platinum: {
    img: "https://elo-boost.net/images/tiers/platinum_5.png",
    price: 40
  },
  diamond: {
    img: "https://elo-boost.net/images/tiers/diamond_5.png",
    price: 50
  },
  master: {
    img: "https://elo-boost.net/images/tiers/master_1.png",
    price: 60
  }
};

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

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

function calculateTotalPrice() {
  total.innerHTML = badges[select1.value].price + badges[select2.value].price;
}

// eventListener on 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;
  price1.textContent = option.price;
  calculateTotalPrice();
  updateSelect(select2, this.value);
});

// eventListener on select2

select2.addEventListener("change", function() {
  const option = badges[this.value];
  imageright.src = option.img;
  price2.textContent = option.price;
  calculateTotalPrice();
  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="price1" 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="price2" style="display:none;"></p>
  </div>
  <select id="sel2" class="slt2"></select>
</div>
<h1>Total Price</h1>

What is the best way to fill out a secondary drop

Answer №1

Answer №2

Similar questions

Troubleshooting Typescript compilation using tsc with a locally linked node package

Angular JavaScript Object Notation structure

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I'm looking to extract various data from a SQLite table using the URL with ExpressJS. What's the best way to achieve

What are the steps to create two frames using Twitter Bootstrap?

Dealing with a divided image in a separate thread: What you need to know

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

Execution of the PHP code within the div element with the id 'upload' is not working properly when trying to use xhr.open("POST", $id("upload").action, true)

Attempting to create a slider utilizing jQuery

When using jQuery to enable contenthover on divs, they will now start a new line instead of

Experiencing problems with the Locale setting when utilizing the formatNumber function in Angular's core functionalities

Currently, I am attempting to retrieve text input through the use of AngularJS

Experiencing a problem with JQuery Offset when a fixed position is applied to a

The functionality of angular-ui's ui-utils and ui-scroll module is currently nonfunctional in version 0.1.0

sending a selection of JSON string values to a jQuery function

Upon transitioning from typescript to javascript

CSS - I add space between the components of the layout, but the color of the space does not match the body color

Convert Screen Coordinates to World Coordinates with ThreeJS

Stopping videos in the JQuery Cycle Plugin triggers the stop event

The first three AJAX requests are successful, but the fourth one fails to reach the PHP script