title: Populating select field by given dictionary
body: <p>I found an example which populates the select field by given html strings:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
      $("#shape").change(function() {
          var val = $(this).val();
          $("#size").html(options[val]);
      });
  
      var options = [
          "&lt;option value='test'&gt;item1: test 1&lt;/option&gt;&lt;option value='test2'&gt;item1: test 2&lt;/option&gt;",
          "&lt;option value='test'&gt;item2: test 1&lt;/option&gt;&lt;option value='test2'&gt;item2: test 2&lt;/option&gt;",
          "&lt;option value='test'&gt;item3: test 1&lt;/option&gt;&lt;option value='test2'&gt;item3: test 2&lt;/option&gt;"
      ];
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Which works fine but how do I have to change the script to do the same with a given dictionary?</p>
  
  <pre><code>options = {
      'ipe': ['80', '100'],
      'hea': ['90', '110'],
  }
  </code></pre>
  
  <p>Here a picture to illustrate:
  <a href="https://i.stack.imgur.com/figNX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/figNX.png" alt="enter image description here"></a></p>
  
  <p>Here my html snippet:</p>
  
  <pre><code>&lt;div class="panel panel-primary"&gt;
    &lt;div class="panel-body"&gt;
      &lt;table&gt;
  
  &lt;tr&gt;
    &lt;td&gt;{{ form.shape.label }}&lt;/td&gt;
    &lt;td&gt;{{ form.shape(class="form-control field", id="shape") }}&lt;/td&gt;
    &lt;td&gt;{{ widgets.errors(form.shape.errors) }}&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
    &lt;td&gt;{{ form.size.label }}&lt;/td&gt;
    &lt;td&gt;{{ form.size(class="form-control field", id="size") }}&lt;/td&gt;
    &lt;td&gt;{{ widgets.errors(form.size.errors) }}&lt;/td&gt;
  &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>