title: filling select input using the value from a map where the key is from another select input
body: <p>Short question:
  I have a list of countries, and a dropdown menu where people can select multiple countries.
  I have a map where each key of the map is a country name, and each value of the country is a city.
  I want to put in options the cities from the countries selected, dynamically.</p>
  <p>How to do this ?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      $: countries_chosen = []
      $: cities_chosen = []
      let countries = [&quot;france&quot;, &quot;spain&quot;, &quot;germany&quot;]
      let cities = []
      let all_cities = {
          &quot;france&quot;: [&quot;paris&quot;, &quot;bordeau&quot;],
          &quot;spain&quot;: [&quot;barcelona&quot;, &quot;madrid&quot;],
          &quot;germany&quot;: [&quot;berlin&quot;, &quot;frankfurt&quot;]
      }
      $: console.log(countries_chosen)
      $: console.log(cities_chosen)
  &lt;/script&gt;
  
   &lt;h1&gt;
      countries
  &lt;/h1&gt;
  
  
      &lt;label&gt;
          &lt;select multiple  bind:value={countries_chosen}&gt;
              {#each countries as country}
              &lt;option value={country}&gt;
                  {country}
              &lt;/option&gt;
              {/each}
      &lt;/label&gt;
  
  
  &lt;h1&gt;
      cities
  &lt;/h1&gt;
  
      &lt;label&gt;
          &lt;select multiple bind:value={cities_chosen}&gt;
              {#each cities as city}
              &lt;option value={city}&gt;
                          {city}
              &lt;/option&gt;
              {/each}
      &lt;/label&gt;
  </code></pre>
  <p>REPL: <a href="https://svelte.dev/repl/61c93b05a2374d1197fb3a38e86b75a1?version=3.46.4" rel="nofollow noreferrer">https://svelte.dev/repl/61c93b05a2374d1197fb3a38e86b75a1?version=3.46.4</a></p>
  <p>Thanks !</p>