通過數據源中的數據添加「selected」屬性到選項

Question

我有一個有趣的問題，我似乎無法弄清楚。我使用JSON從數據源獲取一些數據並在窗體中顯示信息。

什麼是不正確的事情是，我似乎無法讓jQuery將「selected」的屬性添加到適當的選項。

我的問題是，如果我通過一個變量使用一些靜態數據，它工作正常。這裏是我的代碼，它我想它做的事情：Here's a quick JS Fiddle of the below code

<ul> 
      <li class="item"> 
       <label>Name</label> 
       <input type="text" id="txtName"></li> 
      <li class="item"> 
       <label>Description</label> 
       <input type="text" id="txtDescription"></li> 
      <li class="item"> 
       <label> Unit</label> 
       <select id="ddlUnit" > 
        <option value="blank" >Original Stuff</option> 
        <option value="#">#</option> 
        <option value="$">$</option> 
        <option value="%">%</option> 
        <option value="Days">Days</option> 
        <option value="Hrs">Hrs</option> 
        <option value="Mins">Mins</option> 
        <option value="Mths">Mths</option> 
        <option value="Qtrs">Qtrs</option> 
        <option value="Rate">Rate</option> 
        <option value="Wks">Wks</option> 
        <option value="Yrs">Yrs</option> 
       </select> 
      </li> 
     </ul> 




    <script type="text/javascript"> 
     $(document).ready(function() { 
       $("#txtName").val('Testing Name!'); 
       $("#txtDescription").val('Testing The Description!'); 
       var selectedKPI = '#'; 
       $("#ddlUnit").find("option[value='"+selectedKPI+"']").attr('selected','selected'); 
     }); 
    </script> 

工程。它將「選定」屬性添加到適當的選項。

但是！當我試圖從數據源獲取數據時，它不起作用。這是怎麼回事？！

繼承人'我的代碼不起作用。該代碼很好地將數據加載到「輸入」字段中。當我使用警報時，我甚至可以獲得正確的數據。它只是不會將「selected」屬性添加到適當的選項。

<ul> 
      <li class="item"> 
       <label> 
        Name</label> 
       <input type="text" id='txtName' /></li> 
      <li class="item"> 
       <label> 
        Description</label> 
       <input type="text" id='txtDescription' /></li> 
      <li class="item"> 
       <label> 
        Unit</label> 
       <select id='ddlUnit'> 
        <option value="blank">Select a KPI</option> 
        <option value="#">#</option> 
        <option value="$">$</option> 
        <option value="%">%</option> 
        <option value="Days">Days</option> 
        <option value="Hrs">Hrs</option> 
        <option value="Mins">Mins</option> 
        <option value="Mths">Mths</option> 
        <option value="Qtrs">Qtrs</option> 
        <option value="Rate">Rate</option> 
        <option value="Wks">Wks</option> 
        <option value="Yrs">Yrs</option> 
       </select> 
      </li> 
     </ul> 
    </div> 
    <script type="text/javascript"> 
     function LoadKpiCallback(result) { 
       var kpi = result.d;    
       $("#txtName").val(kpi.KpiName); 
       $("#txtDescription").val(kpi.KpiDescription); 
       var selectedKPI = kpi.KpiUnit ; 
       alert(selectedKPI + "2"); 
       $("#ddlUnit").find("option[value='"+selectedKPI+"']").attr("selected","selected"); 
     } 

     function SaveSuccess() { 
      //close the window     
      CloseKendoWindow();    
      //refresh the parent grid 
      LoadKpiList(); 
     } 

     function AjaxError(){ 
      alert('There was a problem saving your KPI!'); 
     } 

     function SaveKPI(){ 
     //load kpi object from controls 
     var kpi = {KPI: { 
        KpiID :<%= Me.KpiID %>, 
        KpiName: $("#txtName").val(), 
        KpiDescription :$("#txtDescription").val(), 
        KpiUnit:$("#ddlUnit option:selected").text() 
        }}; 
        alert(kendo.stringify(kpi)); 

       //use ajax to save 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        async:true, 
        cache: false,     
        data: kendo.stringify(kpi), 
        url: "Services/RockService.svc/SaveKPI", 
        success: SaveSuccess, 
        error: AjaxError      
       });  
      } 

     function LoadKpi() { 
      $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        async:true, 
        cache: false,     
        data: kendo.stringify({KpiID : <%= Me.KpiID %>}), 
        url: "Services/RockService.svc/GetKPI", 
        success: LoadKpiCallback, 
        error: function (xhr) { 
         alert("Bad"); 
         alert(xhr.responseText); 
        } 
       });  
      } 

      LoadKpi(); 

    </script> 

究竟是什麼問題？爲什麼它會與本地數據一起工作，並且遠程數據失敗，但只有選擇？

在此先感謝您的幫助。

Answer 1

$.trim()應刪除任何額外的空格。