为选择选项绑定模板数据答案

【问题标题】：bind template data for select option为选择选项绑定模板数据
【发布时间】：2011-04-29 02:54:35
【问题描述】：

假设我有一个带有这个 html 代码的 jquery 模板：

<div>
<span id="myfirstname"></span>
<select id="mygender" multiple="multiple">
  <option value="1">-select-</option>
  <option value="2">Male</option>
  <option value="3">Female</option>
  <option value="4">NotSpecified</option>
</select>
</div>

我的 json 看起来像：{ "FirstName": "John", "Gender": "Male" };

我可以使用 ${FirstName} 绑定我的名字，但如何绑定下拉值？我使用了 ${Gender}，但它只显示值，而不是选择了“男性”选项的下拉列表。

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

一个选项是这样的：

<div>
    <span id="myfirstname">${FirstName}</span>
    <select id="mygender" multiple="multiple">
        <option value="1">-select-</option>
        <option value="2" {{if Gender == 'Male'}}selected="selected"{{/if}}>Male</option>
        <option value="3" {{if Gender == 'Female'}}selected="selected"{{/if}}>Female</option>
        <option value="4" {{if Gender == 'NotSpecified'}}selected="selected"{{/if}}>NotSpecified</option>
    </select>
</div>

如果这太冗长，那么您可以创建一个函数来进行匹配：

function match(value, choice) {
    return value === choice ? "selected='selected'" : "";   
}

然后做：

<div>
    <span id="myfirstname">${FirstName}</span>
    <select id="mygender" multiple="multiple">
        <option value="1">-select-</option>
        <option value="2" ${match(Gender, 'Male')}>Male</option>
        <option value="3" ${match(Gender, 'Female')}>Female</option>
        <option value="4" ${match(Gender, 'NotSpecified')}>NotSpecified</option>
    </select>
</div>

【讨论】：