Quisiera saber como puedo cambiar una parte del texto de las opciones de un select. Tengo una calculadora de cambio de moneda y, según la moneda elegida, debo cambiar dinámicamente la cantidad y el nombre de la moneda al final del nombre de la película.
He usado pero no sé si es la mejor opción. El título de la película siempre debe ser el mismo.
<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>Cuando un usuario elige otro en el menú desplegable, por ejemplo, el euro, el código debería verse así:
<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>¿Algunas ideas? ¿Qué selector debo usar? Debe cambiar el número y el código de moneda. Estoy usando Fetch con la API de exchangerate-api.com
Gracias !!
Suponiendo que la API devuelve algún diccionario de tasas de conversión, a continuación se muestra una solución funcional. Tenga en cuenta que, de acuerdo con las especificaciones actuales de HTML5 , el elemento de option solo puede contener texto si no tiene etiqueta y es un elemento secundario de un elemento de select .
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> El título se encuentra en el atributo data-title y se usa para formatear el textContent de texto de cada elemento de opción. El nuevo valor se muestra con 2 decimales.
Si la option es la opción actual que se está actualizando, new_price es el precio recalculado y la currency es la nueva moneda, puede hacer lo siguiente:
option.value = new_price; option.querySelector(".replace").innerText = `${new_price} ${currency}`;Espero que el siguiente código te ayude.
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) } } }El ejemplo anterior es simple según sus necesidades de moneda desplegable y en el cambio cada vez que obtiene la moneda y utiliza la API de moneda (para eso). Luego puede obtener el contenido deseado del siguiente menú desplegable.