使用映射中的值填充 select 输入，其中键来自另一个 select 输入

Question

小问题：我有一个国家列表和一个下拉菜单，人们可以在其中 select 多个国家。我有一张地图，其中地图的每个键都是一个国家名称，国家的每个值都是一个城市。我想在选项中添加 selected 国家/地区的城市，动态地。

如何操作？

<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>

回复：https://svelte.dev/repl/61c93b05a2374d1197fb3a38e86b75a1?version=3.46.4

谢谢！

Answer 1

您可以根据 countries_chosen 反应性地填充城市数组，方法是简单地将每个选定的国家映射到它们各自的城市，然后展平该数组。

    $: cities = countries_chosen.map(c => all_cities[c]).flat()

Answer 2

这是工作代码：

<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>

使用映射中的值填充 select 输入，其中键来自另一个 select 输入

filling select input using the value from a map where the key is from another select input

html

javascript

svelte