按给定字典填充选择字段

Question

我找到了一个通过给定的html字符串填充select字段的示例：

<script>
$(document).ready(function() {

    $("#shape").change(function() {
        var val = $(this).val();
        $("#size").html(options[val]);
    });

    var options = [
        "<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>",
        "<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>",
        "<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>"
    ];

});
</script>

哪个工作正常，但我如何更改脚本以对给定字典执行相同操作？

options = {
    'ipe': ['80', '100'],
    'hea': ['90', '110'],
}

这里有一张图片来说明：

这是我的html片段：

<div class="panel panel-primary">
  <div class="panel-body">
    <table>

<tr>
  <td>{{ form.shape.label }}</td>
  <td>{{ form.shape(class="form-control field", id="shape") }}</td>
  <td>{{ widgets.errors(form.shape.errors) }}</td>
</tr>

<tr>
  <td>{{ form.size.label }}</td>
  <td>{{ form.size(class="form-control field", id="size") }}</td>
  <td>{{ widgets.errors(form.size.errors) }}</td>
</tr>

    </table>
  </div>
</div>