I would like to know how I can change a part of the text of the options of a select. I have a currency exchange calculator, and depending on the chosen currency, I should dynamically change the amount and name of the currency at the end of the movie name.
I have used but I don't know if it is the best option. The title of the film must always remain the same
<div class="movie-container">
<label>Pick a movie:</label>
<select id="movie">
<option value="10">Once Upon a Time <span class="replace">12 USD</span></option>
<option value="12">Pulp Fiction <span class="replace">10 USD</span></option>
<option value="8">Reservoir Dogs <span class="replace">9 USD</span></option>
<option value="9">Django: Unchained <span class="replace">8USD</span></option>
</select>
</div>
When a user chooses another to the dropdown, for example the Euro, the code should look like this:
<div class="movie-container">
<label>Pick a movie:</label>
<select id="movie">
<option value="10,8">Once Upon a Time <span class="replace">10,8 EUR</span></option>
<option value="8,9">Pulp Fiction <span class="replace">8,9 EUR</span></option>
<option value="7,6">Reservoir Dogs <span class="replace">7,6 EUR</span></option>
<option value="6,8">Django: Unchained <span class="replace">6,8 EUR</span></option>
</select>
</div>
Any ideas? Which selector should I use? You should change the number and currency code. I am using Fetch with the exchangerate-api.com API
Thanks !!
Assuming that the API returns some dictionary of conversion rates, below is a working solution. Note that according to current HTML5 specifications, the option element can only contain text if it has no label and is a child of a select element.
let rates = {
"USD": 1,
"Euro": 0.86,
"GBP": 0.74
}
let oldUnit = "USD";
document.getElementById("currencyPicker").onchange = function(e) {
let newUnit = document.getElementById("currencyPicker").value;
document.querySelectorAll(".movieOption").forEach((movie) => {
let newValue = movie.value * rates[newUnit] / rates[oldUnit];
let newText = `${movie.dataset.title} ${newValue.toFixed(2)} ${newUnit}`
movie.textContent = newText;
movie.value = newValue;
});
oldUnit = newUnit;
}<div>
<label>Pick a currency:</label>
<select id="currencyPicker">
<option value="USD">USD</option>
<option value="Euro">Euro</option>
<option value="GBP">GBP</option>
</select>
</div>
<div class="movie-container">
<label>Pick a movie:</label>
<select id="movie">
<option data-title="Once Upon a Time" class="movieOption" value="12">Once Upon a Time 12.00 USD</option>
<option data-title="Pulp Fiction" class="movieOption" value="10">Pulp Fiction 10.00 USD</option>
<option data-title="Reservoir Dogs" class="movieOption" value="9">Reservoir Dogs 9.00 USD</option>
<option data-title="Django: Unchained" class="movieOption" value="8">Django: Unchained 8.00 USD</option>
</select>
</div>The title is held in the data-title attribute, and is used to format the textContent of each option element. The new value is displayed to 2 decimal places.
If option is the current option being updated, new_price is the recalculated price, and currency is the new currency, you can do:
option.value = new_price;
option.querySelector(".replace").innerText = `${new_price} ${currency}`;
I hope the following code will help you out.
window.onload = function(){
const currency = document.getElementById('currency');
const movieContainer = document.getElementById('movie');
// on currency change event you will get the selected index.
currency.onchange = function(){
const sCurrency = this.selectedIndex;
const currencyArray = [{name: 'US', isNow: 100},
{name: 'EU', isNow: 20}];
let selectedItem = currencyArray.find((item,index) => index === this.selectedIndex);
/* console.log(movieContainer) */
for(let i=0; i<movieContainer.options.length; i++) {
console.log(movieContainer.options[i])
// this will gives you the outer html
console.log(movieContainer.options[i].outerHTML)
// this will give you the innerText
console.log(movieContainer.options[i].innerText)
}
}
}
The above example is simple as per your needs currency drop down and on change of each time you get the currency and utilize the currency api(for that). Then you can get the desired content of the next drop down.