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

Question

这里的问题陈述是，我有一个选择列表，这是通过在服务器的JSON数据的帮助下由句柄填充的，如data_option变量所示，然后在数据变量中存在来自服务器存储的其他响应，这是实际的数据将被设置为选择列表。 由于我已经指定了编译数据时的值，但它仍然没有选择该值，当我使用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您想要选择的选项。

例如，您可以修改您的数据设置一个标志指示选择状态：

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/