Добавить «выбранный» атрибут к опции через данные из источника данных

Question

У меня есть интересная проблема, которую я не могу понять.Я использую JSON, чтобы получить некоторые данные из источника данных и отобразить информацию в форме.

То, что не происходит должным образом, заключается в том, что я не могу заставить jQuery добавить атрибут «selected» кправильный вариант.

Моя проблема в том, что если я использую некоторые статические данные через переменную, это работает нормально.Вот мой код, который делает то, что я хочу, чтобы он делал: Вот быстрый JS Fiddle из приведенного ниже кода

  <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() должны удалить все дополнительные пробелы.