如何设置动态生成的下拉列表或多个 select 的值？

Question

这里的问题陈述是我有一个 select 列表，在 JSON 来自服务器的数据的帮助下，车把正在填充该列表，如 data_option 变量所示，然后服务器存储在数据变量中还有其他响应，这是要为 select 列表设置的实际数据。因为我在编译数据时已经指定了值，但它仍然不是 select 的值，当我使用 Jquery 检索它时，它会抛出空值。

<div class="make">
    <script type="text/x-handlears-template" id="make">
        <select class="options" value="{{id}}">
            <option value="">--</option>
        </select>
    </script>
</div>

<script type="text/x-handlears-template" id="options">
    {{#each option}}
        <option value="{{id}}">{{name}}</option>
    {{/each}}
</script>
<script type="text/javascript">
var data = {"id": 3};
var data_options = {
    "option":[
        {
            "id": 1,
            "name": "John Doe"
        },
        {
            "id": 2,
            "name": "James Don"
        },
        {
            "id": 3,
            "name": "John Don"
        },
        {
            "id": 4,
            "name": "James Doe"
        }
    ]
}
var source = $('#make').html();
var template = Handlebars.compile(source);
$('.make').append(template(data));
var source2 = $('#options').html();
var template2 = Handlebars.compile(source2);
$('.options').append(template2(data_options));
</script>

Answer 1

您必须 set the selected attribute 您希望 select 的选项。

例如，您可以修改数据以设置指示 select离子状态的标志：

var i, opt;
for (var i=data_options.option.length-1; i>=0; i--) {
    opt = data_options.option[i];
    if (opt.id === data.id) {
        opt.selected = true;
        break;
    }
}

var source2 = $('#options').html();
var template2 = Handlebars.compile(source2);
$('.options').append(template2(data_options));

并相应地在模板中使用 {{#if selected}} ... {{/if}}

<script type="text/x-handlears-template" id="options">
    {{#each option}}
        {{#if selected}}
            <option value="{{id}}" selected="selected">{{name}}</option>
        {{else}}
            <option value="{{id}}">{{name}}</option>
        {{/if}}
    {{/each}}
</script>

http://jsfiddle.net/nikoshr/p588kp0L/

如何设置动态生成的下拉列表或多个 select 的值？

How to set value of drop down list or multiple select that was generated dynamically?

javascript

jquery

json

handlebars.js