的選擇選項綁定模板數據

Question

比方說，我有這樣的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" };

我可以myfirstname使用$ {名字}但怎麼做綁定我綁定下拉值？我使用了$ {Gender}，但只顯示了值，而不顯示選中「男性」選項的下拉列表。

Answer 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>