Master Slave DropDownList Use jQuery Ajax ($.ajax) and HttpH

本文关键字：ajax and HttpH Ajax Slave DropDownList Use jQuery Master | 更新日期: 2023-09-27 18:12:58

我有2个下拉列表和一个jQuery脚本与HttpHandler在服务器端，有一个问题在绑定奴隶下拉列表。

这是我的默认值。jQuery代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="Sample001.Default" %>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
        <asp:Label ID="masterlbl" Text="Master" runat="server" />
                </td>
                <td>
                    <span class="Mastercs">
                <asp:DropDownList ID="ddl1" runat="server">
                <asp:ListItem Text="Item1" Value="Item1" />
                <asp:ListItem Text="Item2" Value="Item2" />
                <asp:ListItem Text="Item3" Value="Item3" />
                <asp:ListItem Text="Item4" Value="Item4" />
                <asp:ListItem Text="Item5" Value="Item5" />
                </asp:DropDownList>
                    </span>
                </td>
                <td>
            <asp:Label ID="slavelbl" Text="Slave" runat="server" />
            </td>
                <td>
                    <span class="slavecs">
                    <asp:DropDownList ID="ddl2" runat="server" />
                    </span>
                </td>
            </tr>
        </table>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('span.Mastercs select').change(function () {
                $.ajax({
                    type: "POST",
                    url: 'MyHandler.ashx',
                    dataType: "text",
                    data: "ItemSelected=" + $('select#ddl1').val(),
                    async: true,
                    success: function (data) { Handler_Success(data); }
                });
            });
            function Handler_Success(data) {
                $('select#ddl2').empty();
                $.each(data, function (i, slaveValue) {
$('select#ddl2').append($('<option></option>')
.val(data.Value).html(data.Text));
                });
            }
        });
    </script>
</body>
</html>

这是My handler:

public class SlaveValue {
        public string Value { get; set; }
        public string Text { get; set; }
    }
    public class SlaveValueHandler : IHttpHandler {
        public bool IsReusable {
            get { return true; }
        }
        public void ProcessRequest(HttpContext context) {
            string valueSelected = context.Request["ItemSelected"];
            List<SlaveValue> slaveValues = new List<SlaveValue>();
            SlaveValue sv;
            sv = new SlaveValue();
        sv.Text = "SV1";
        sv.Value = valueSelected + "s1";
        slaveValues.Add(sv);
        sv = new SlaveValue();
        sv.Text = "SV2";
        sv.Value = valueSelected + "s2";
        slaveValues.Add(sv);
        sv = new SlaveValue();
        sv.Text = "SV3";
        sv.Value = valueSelected + "s3";
        slaveValues.Add(sv);
    string responseText = 
Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues);
            context.Response.ContentType = "text/json";
            context.Response.Write(responseText);
        }
    }

当ddl1(下拉列表)改变时，我可以在Firebug中看到正确的响应。但在ddl2(下拉列表)没有看到任何变化:这是Firebug响应:

[{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},
{"Value":"Item3s3","Text":"SV3"}]

同样，当我将脚本SuccessMethod更改为以下代码时，ddl2(DropDownList)绑定正确。: 

function Handler_Success(data) {
                $('select#ddl2').empty();
                $.each(data, function (i, slaveValue) {
                    $('select#ddl2').append($('<option>
    </option>').val('sv1').html('s1'));
                });
            }

，正如你看到的ddl2(DropDownList)与上面的代码正确绑定，问题在哪里?为什么我可以看到Firebug的响应，但绑定不工作?

Master Slave DropDownList Use jQuery Ajax ($.ajax) and HttpH

也许这很有用，就像你的问题一样，有一个完整的一步一步的解决方案:

在jquery中使用json返回值

不确定，但也许这是你的问题:

function Handler_Success(data) {
    $('select#ddl2').empty();
    $.each(data, function (i, slaveValue) {
        $('select#ddl2').append($('<option>/option>') // <-- $('<option></option>')
        .val(data.Value).html(data.Text));
    });
}

[编辑]正确的版本应该是:

function Handler_Success(data) {
    $('select#ddl2').empty();
    $.each(data, function (i, slaveValue) {
        $('select#ddl2').append($('<option></option>')
        .val(data.Value).html(data.Text));
    });
}
相关文章：