Question

我正在使用jQuery模板插件（jquery.tmpl.js），并且大多数情况下我理解它，但我真的很难让它使用其中select元素的选项来自一个元素的元素JSON对象，但所选值来自另一个属性。以下是我的代码：

HTML：

        <fieldset id="userFieldset">
            <script id="userTemplate" type="text/x-jquery-tmpl">

                    <label for="TitleId">Title</label>
                    <select value="${TitleId}" id="TitleId" name="TitleId">
                        {{tmpl(titles) "#titleTemplate"}}                            
                    </select>  
                    <label for="UserName">Name</label>
                    <input type="text" name="UserName" id="UserName" class="text ui-widget-content ui-corner-all" value="${UserName}"/>
                    <label for="Password">Password</label>
                    <input type="password" name="Password" id="Password" class="text ui-widget-content ui-corner-all" value="${Password}"/>             
            </script>    

            <script id="titleTemplate" type="text/x-jquery-tmpl">
                <option value="${ID}">${Value}</option>
            </script>        
        </fieldset>

javascript：

var titles = Sys.Serialization.JavaScriptSerializer.deserialize("[{\"ID\":3,\"Value\":\"Mr\"}, {\"ID\":2,\"Value\":\"Ms\"}, {\"ID\":1,\"Value\":\"Doctor\"}]", false);

function showEditUser(user) {
    $("#userFieldset").empty();        
    $("#userTemplate").tmpl(user).appendTo("#userFieldset");    
    $("#userDialog").dialog("open");    
}

但是，这不会更改TitleId选择的选定值。任何帮助将不胜感激。

Answer 1

您需要在选项元素上设置所选属性。

执行此操作的一种方法是将选项传递给包含TitleId的{{tmpl}}，以便您可以将其与标题对象的ID变量进行比较。

这看起来像是：

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

因此，您将TitleId传递给您的子模板并将其命名为selectedId（您当然可以将其称为TitleId）。您可以在$item对象（例如$item.selectedId）的子模板中访问它，并使用它来确定是否应在selected元素上设置option属性。

此处示例：http://jsfiddle.net/rniemeyer/YCQ9S/

Answer 2

“value”不是<select> HTML标记的有效属性。您必须在<option>本身上设置“已选择”属性才能将其选中。尝试这样的事情：

<script id="titleTemplate" type="text/x-jquery-tmpl">
    <option value="${ID}" selected="${checkSelected(this.data.ID)}">${Value}</option>
</script> 

<script>
function checkSelected(id)
{
   // logic to determine if this id should be the selected one.  
   return "selected";  //or not
}
</script>

jQuery.tmpl和<select>选项</select>

2 个答案: