jQuery.tmpl 및 <select> 옵션

Question

저는 jQuery 템플릿 플러그인 (jquery.tmpl.js)을 사용하고 있으며 대부분 이해하고 있습니다.하지만이 옵션을 사용할 수있는 요소를 얻으려면 정말 고심하고 있습니다. select 요소는 하나의 JSON 객체에서 가져 왔지만 선택한 값은 다른 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> 

자바 스크립트 :

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.selectedId)에 액세스하고 selected 특성이 option 요소에 설정되어야하는지 확인하는 데 사용합니다. 여기

샘플 : http://jsfiddle.net/rniemeyer/YCQ9S/

Answer 2

"값은"<select> HTML 태그의 유효한 속성이 아닙니다. 선택하기 위해 <option> 자체에서 "selected"속성을 설정해야합니다. 다음과 같이 시도하십시오.

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