Pregunta breve: tengo una lista de países y un menú desplegable donde las personas pueden seleccionar varios países. Tengo un mapa donde cada clave del mapa es el nombre de un país, y cada valor del país es una ciudad. Quiero poner en opciones las ciudades de los países seleccionados, de forma dinámica.
Como hacer esto ?
<script> $: countries_chosen = [] $: cities_chosen = [] let countries = ["france", "spain", "germany"] let cities = [] let all_cities = { "france": ["paris", "bordeau"], "spain": ["barcelona", "madrid"], "germany": ["berlin", "frankfurt"] } $: console.log(countries_chosen) $: console.log(cities_chosen) </script> <h1> countries </h1> <label> <select multiple bind:value={countries_chosen}> {#each countries as country} <option value={country}> {country} </option> {/each} </label> <h1> cities </h1> <label> <select multiple bind:value={cities_chosen}> {#each cities as city} <option value={city}> {city} </option> {/each} </label>REEMPLAZO: https://svelte.dev/repl/61c93b05a2374d1197fb3a38e86b75a1?version=3.46.4
Gracias !
aquí está el código de trabajo:
<script> $: countries_chosen = [] $: cities_chosen = [] let countries = ["france", "spain", "germany"] let cities = [] let all_cities = { "france": ["paris", "bordeau"], "spain": ["barcelona", "madrid"], "germany": ["berlin", "frankfurt"] } $: console.log(countries_chosen) $: console.log(cities_chosen) </script> <h1> countries </h1> <label> <select multiple bind:value={countries_chosen}> {#each countries as country} <option value={country}> {country} </option> {/each} </label> <h1> cities </h1> <label> <select multiple bind:value={cities_chosen}> {#each countries_chosen as country} {#each all_cities[country] as city} <option value={city}> {city} </option> {/each} {/each} </label>Rellenaría de forma reactiva la matriz de ciudades en función de los countries_chosen simplemente asignando cada uno de los países seleccionados a sus respectivas ciudades y luego aplanando esta matriz.
$: cities = countries_chosen.map(c => all_cities[c]).flat()