使用jquery(ajax)在第一个列表框项上设置第二个列表框项更改 [英] setting 2nd listbox items on 1st listbox item change using jquery (ajax)

问题描述

我已经使用asp.net ajax编写并编写了所有函数，其中在类别列表框项目上更改了它的自动回传并显示了与选定类别列表框相关的子类别列表框.

我想在jquery中做.

我如何使用Ajax做到这一点.

谢谢

以下是标记:

 $(' #UpdatePanel1').panelReady(功能(){
                           $(' #lstcategory').click(> function (){
                               //  $("input#text1").val($(#lstcategory选项:selected").val( )); 
                               //  var dataToSend = {MethodName:'GenerateSubCategories'，类别:$(#lstcategory选项:selected").val ()}; 
                                var  dataToSend = {方法名称:'  GenerateSubCategories'，类别:文档 .getElementById('  lstcategory').value};
                               //  var id = $ .readQS('productId'); 
                                var 选项=
                                   {
                                       网址:<％= Request.Url ％> ，
                                       数据:dataToSend，
                                       dataType:'  JSON'，
                                       类型:'  POST'，
                                       成功:功能(){$( this ).dialog(" )； }
                                   };
                               $ .ajax(选项);
                           });
                       });


                   });

ASP代码:

 <   asp:UpdatePanel     ID   ="     runat   =" 服务器" <   contenttemplate  > 
                             <   asp:ListBox     ID   ="   ClientIDMode   静态"  runat   服务器"  AutoPostBack   真实"                                           字体粗体   True" 字体-名称  ="    字体大小  ="    高度  ="  150像素" 宽度  ="  
                     span>                                                    ="   lstcategory_SelectedIndexChanged" <   asp:ListItem  > 无

                    <   asp:ListBox     ID   ="   runat   服务器"  ClientIDMode   静态"    ="   True" 
                                           高度  ="     onselectedindex更改  ="  
                                           样式  ="    可见  ="    宽度  ="  > 
                     <   asp:Button     ID   ="   runat   服务器"  onclick    btngenerate_Click"                     span>                             文本  = "    / >  <  /contenttemplate  > 
                         <  触发器 > 
                         <   asp:AsyncPostBackTrigger     ControlId   ="  / <   asp:AsyncPostBackTrigger     ControlID   ="  / <  /triggers  > 

还有C#代码:

 受保护的 无效 Page_Load(对象发​​件人，EventArgs e)
    {
        如果(Request.Form [" ] == " )
        {
             var 类别= Request.Form ["  span>].ToString();
            GenerateSubCategories(category);
        }
        如果(Request.Form [" ] == " )
        {
             var 子类别= Request.Form ["  span>].ToString();
            GenerateForm(子类别);
        } 

我正在获取表单方法名称，如哈希代码或id被弄乱.

相反，如果获取"GenerateSubCategories".

解决方案

(' #UpdatePanel1').panelReady(函数(){

(' #lstcategory').click(函数(){ //

("input#text1").val(

Hi,

I have written and coded all the function using asp.net ajax in which on categories listbox item change it autopostbacks and show the related subcategories listbox w.r.t category listbox selected item.

I want to do it in jquery.

How i can do it using ajax.

Thanks

Following is the markup :

$('#UpdatePanel1').panelReady(function () {
                           $('#lstcategory').click(function () {
                               //$("input#text1").val($("#lstcategory option:selected").val());
                               //var dataToSend = { MethodName: 'GenerateSubCategories', Category: $("#lstcategory option:selected").val() };
                               var dataToSend = { MethodName: 'GenerateSubCategories', Category: document.getElementById('lstcategory').value };
                               // var id = $.readQS('productId');
                               var options =
                                   {
                                       url: <%=Request.Url %>,
                                       data: dataToSend,
                                       dataType: 'JSON',
                                       type: 'POST',
                                       success: function () { $(this).dialog("close"); }
                                   };
                               $.ajax(options);
                           });
                       });


                   });

asp code :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                             <contenttemplate>
                             <asp:ListBox ID="lstcategory" ClientIDMode="Static" runat="server" AutoPostBack="True"
                         Font-Bold="True" Font-Names="Arial" Font-Size="10pt" Height="150px" Width="220px"
                                     onselectedindexchanged="lstcategory_SelectedIndexChanged">
                         <asp:ListItem>None

                    <asp:ListBox ID="lstsubcategory" runat="server" ClientIDMode="Static"  AutoPostBack="True"
                         Height="150px" onselectedindexchanged="lstsubcategory_SelectedIndexChanged"
                         style="text-align: left" Visible="False" Width="220px">
                     <asp:Button ID="btngenerate" runat="server" onclick="btngenerate_Click"
                         Text="Generate Form" /></contenttemplate>
                         <triggers>
                         <asp:AsyncPostBackTrigger ControlId="lstcategory" />
                         <asp:AsyncPostBackTrigger ControlID="lstsubcategory" />
                         </triggers>

And c# code behind :

protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Form["MethodName"] == "GenerateSubCategories")
        {
            var category = Request.Form["Category"].ToString();
            GenerateSubCategories(category);
        }
        if (Request.Form["MethodName"] == "GenerateForm")
        {
            var subcategory = Request.Form["SubCategory"].ToString();
            GenerateForm(subcategory);
        }

I am getting form method name as hashed code or id get mangled.

Instead if getting "GenerateSubCategories".

解决方案

('#UpdatePanel1').panelReady(function () {

('#lstcategory').click(function () { //

("input#text1").val(

这篇关于使用jquery(ajax)在第一个列表框项上设置第二个列表框项更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！