Asp.net jquery级联下拉列表 [英] Asp.net jquery cascading dropdownlist
问题描述
亲爱的代码项目团队，
请解决我的代码拼图，我已经尝试过很多但不想放弃，
我使用asp.net构建级联下拉列表jquery
级联下拉代码如下，
我的JSCRIPT
Dear Code Project Team,
Please solve my code puzzle, i have tried a lot and don;t want to give up,
I have build cascading dropdownlist using asp.net jquery
Code for cascading dropdown is as follows,
My JSCRIPT
<script type="text/javascript">
$(function () {
$('#<%=ddlclassification2.ClientID %>').attr('disabled', 'disabled');
$('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
$('#<%=ddlclassification2.ClientID %>').append('<option selected="selected" value="0">Select Category</option>');
$('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');
$('#<%=ddlclassification1.ClientID %>').change(function () {
var Entity = $('#<%=ddlclassification1.ClientID%>').val()
$('#<%=ddlclassification2.ClientID %>').removeAttr("disabled");
$('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');
$('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
$.ajax({
type: "POST",
url: "DigitalPrepping.aspx/BindCategory",
data: "{'Entity':'" + Entity + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#<%=ddlclassification2.ClientID %>').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
});
$('#<%=ddlclassification2.ClientID %>').change(function () {
var Category = $('#<%=ddlclassification2.ClientID%>').val()
$('#<%=ddlSubCategory.ClientID %>').removeAttr("disabled");
$.ajax({
type: "POST",
url: "DigitalPrepping.aspx/BindSubCategory",
data: "{'Category':'" + Category + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#<%=ddlSubCategory.ClientID %>').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
})
$('#<%=rdlist.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var Data = $(this).val();
$.each(Data.split(/\|/), function (i, val) {
if (i == 0) {
$('#<%=ddlclassification1.ClientID %>').val($.trim(val));
}
if (i == 1) {
$.ajax({
type: "POST",
url: "DigitalPrepping.aspx/BindSubCategory",
data: "{'Category':'" + Category + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var j = jQuery.parseJSON(msg.d);
var options;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
}
$('#<%=ddlSubCategory.ClientID %>').html(options)
},
error: function (data) {
alert('Something Went Wrong')
}
});
$('#<%=ddlclassification2.ClientID %>').val($.trim(val));
}
if (i == 2) {
}
})
});
})
</script>
ASP.NET控件，
ASP.NET controls,
<tr>
<td>
<asp:Label ID="lblclassification1" Text="Classification" runat="server"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlclassification1" CausesValidation="true" runat="server"
Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification1_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblClassification2" Text="Category" runat="server"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlclassification2" CausesValidation="true" runat="server"
Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification2_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblClassification3" Text="SubCategory" runat="server"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlSubCategory" runat="server" Width="170px" OnSelectedIndexChanged="ddlSubCategory_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:Label ID="lblTypeTOSearch" runat="server" Text="Type to Search" Visible="False"></asp:Label>
</td>
</tr>
C＃代码。
C# code.
[WebMethod]
public static string BindCategory(string Entity)
{
BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
DataTable dt = b_up.GetClassification_2("ZI100115", Entity);
StringWriter builder = new StringWriter();
builder.WriteLine("[");
if (dt.Rows.Count > 0)
{
builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
builder.WriteLine("\"optionValue\":\"0\"},");
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["DocumentCategory_Value"] + "\",");
builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["DocumentCategory_ID"] + "\"},");
}
}
else
{
builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
builder.WriteLine("\"optionValue\":\"0\"},");
}
string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
returnjson = returnjson + "]";
return returnjson.Replace("\r", "").Replace("\n", "");
}
[WebMethod]
public static string BindSubCategory(string Category)
{
BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
DataTable dt = b_up.GetClassification_3("ZI100115", Category);
StringWriter builder = new StringWriter();
builder.WriteLine("[");
if (dt.Rows.Count > 0)
{
builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
builder.WriteLine("\"optionValue\":\"0\"},");
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["SubCategory_Value"] + "\",");
builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["SubCategory_ID"] + "\"},");
}
}
else
{
builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
builder.WriteLine("\"optionValue\":\"0\"},");
}
string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
returnjson = returnjson + "]";
return returnjson.Replace("\r", "").Replace("\n", "");
}
我的级联下拉工作绝对正常
ex：当我选择分类1时填写分类2&当我选择分类2时，它会填充SubCategory列表。
问题：
我有分类建议radiobutton list
当我选择建议它应该自动填充分类1,2和&子类别列表。
我尝试过：
当我选择时建议radiobutton列表它应该通过匹配值自动填充所有三个下拉列表。
$（'＃<％= rdlist.ClientID ％>输入'）。change（function（）{
//发起事件的那个总是
//选中一个;你不需要测试这个
var Data = $（this）.val（）;
$ .each（Data.split（/ \\ \\ | /），函数（i，val）{
如果（i == 0）{
//以下行正常工作，因为分类1填充在页面加载我的代码
$（'＃<％= ddlclassification1.ClientID％>'）。val（$ .trim（val））;
//它开火了触发并调用我的分类1更改事件并在//分类2下拉列表中填充值
$（'＃<％= ddlclassification1.ClientID％>'）。触发器（'更改'）;
}
if（i == 1）{
//下面的行不起作用
$（'＃<％= ddlclassification2.ClientID％>'）。val（$ .trim（val））;
}
if（i == 2）{
}
} ）
}）;
如果有人可以，我将不胜感激花很少的时间来解决这个问题。
我非常沮丧。
谢谢&此致，
Sunil mali
my Cascading drop down works absolutely fine
ex: when i select classification1 it populates classification 2 & when i select Classification 2 it populates SubCategory list.
Problem:
I have classification suggestion radiobutton list
when i select suggestion it should auto populate classification 1, 2 & SubCategory list.
What I have tried:
When i select suggestion radiobutton list it should auto populate all three dropdown list by matching values.
$('#<%=rdlist.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var Data = $(this).val();
$.each(Data.split(/\|/), function (i, val) {
if (i == 0) {
//below line works fine as classification 1 is populated on page load of my code
$('#<%=ddlclassification1.ClientID %>').val($.trim(val));
//It fires trigger and calls my classification1 change event and populates values in //classification 2 dropdown
$('#<%=ddlclassification1.ClientID %>').trigger('change');
}
if (i == 1) {
//Below line does not work
$('#<%=ddlclassification2.ClientID %>').val($.trim(val));
}
if (i == 2) {
}
})
});
I will appreciate if somebody could spend little time and solve this.
I am very frustrated.
Thanks & Regards,
Sunil mali
推荐答案
（ function （）{
（' ＃<％= ddlclassification2.ClientID％>'）。attr（' disabled'，' disabled'）;
('#<%=ddlclassification2.ClientID %>').attr('disabled', 'disabled');
（' ＃<％= ddlSubCategory.ClientID％>'）。attr（' 已禁用'，' 已禁用'）;
('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
这篇关于Asp.net jquery级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
