通过数据源中的数据添加“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()应删除任何额外的空格。