jQuery.tmpl and <select> options

http://stackoverflow.com/questions/5731093/jquery-tmpl-and-select-options

by rniemeyer

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<fieldset id="userFieldset">
    <script id="userTemplate" type="text/x-jquery-tmpl">
        <select id="TitleId" name="TitleId">
            {{tmpl(titles, { selectedId: TitleId }) "#titleTemplate"}}                            
        </select>          
    </script>    
    
    <script id="titleTemplate" type="text/x-jquery-tmpl">
        <option {{if ID === $item.selectedId}}selected="selected"{{/if}} value="${ID}">${Value}</option>
    </script>        
</fieldset>

CSS

ul { margin-left: 20px; }

JavaScript

var model = {
    titles: [
        {
        ID: 3,
        Value: "Mr"},
    {
        ID: 2,
        Value: "Ms"},
    {
        ID: 1,
        Value: "Doctor"}
    ],
    TitleId: 2
};

$("#userTemplate").tmpl(model).appendTo("#userFieldset");