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”属性添加到正确的选项中。

然而！当我尝试从数据源中获取数据时，它不起作用。这是什么交易？！

Heres'我的代码不起作用。此代码将数据加载到“输入”字段中。当我使用警报时，我甚至可以获得正确的数据。它只是没有将“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>

究竟是什么问题？为什么它适用于本地数据，并且使用远程数据失败，但仅限于select ??

提前感谢您的帮助。

Answer 1

$.trim()应删除任何其他空格。

通过数据源中的数据将“selected”属性添加到选项中

1 个答案: