我有 3 个下拉列表，第一个下拉列表“产品下拉列表”根据所选项目填充第二个下拉列表“类别下拉列表”，第二个下拉列表根据所选值填充第三个下拉列表“部分下拉列表”，但问题是每当我从第二个下拉列表中选择该项目，它完美地填充了第三个下拉列表，即部分下拉列表，但它不保存自己选定的项目，并且第二个下拉列表将自身更改为第三个下拉列表，即部分下拉列表。这意味着从第二个下拉列表中选择项目后，零件下拉列表的总数变为两个。
产品下拉列表
<asp:DropDownList id="slctproduct" runat="server" name="select" class="form-control form-
control-primary" onchange="selectcategory(); return false;"> </asp:DropDownList>
类别下拉菜单
<asp:DropDownList id="slctpartcategory" runat="server" class="form-control form-control-
primary" onchange="selectpart(); return false;" ></asp:DropDownList>
部分下拉菜单
<asp:DropDownList id="slctpart" runat="server" name="select" class="form-control form
control-primary" ></asp:DropDownList>
根据产品下拉列表中所选项目填充类别下拉列表的代码
function selectcategory() {
var product = document.getElementById('<%= slctproduct.ClientID %>');
// Fetch and populate part categories based on the selected product
$.ajax({
type: "POST",
url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_PartCategoryForCN",
data: "{ 'P': { 'RNI_FK_CN_PartCategory': '" + product.value + "' } }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var ddlProducts2 = $("[id*=slctpartcategory]");
ddlProducts2.empty().append('<option selected="selected" value="-1">Select Part Category</option>');
$.each(r.d, function () {
ddlProducts2.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
});
}
下面的代码是写在文件（aspx.cs）后面的代码中
public static List<ListItem> RNI_Fetch_PartCategoryForCN(Properties P)
{
using (cmd = new SqlCommand())
{
List<ListItem> type = new List<ListItem>();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "sp_Fetch_PartcategoryForCN";
cmd.Connection = Getconnected.getconnecting();
cmd.Parameters.AddWithValue("@Product", P.RNI_FK_CN_PartCategory);
//cmd.Parameters.AddWithValue("@category", P.RNI_FK_SelectedPartCategory);
using (sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
type.Add(new ListItem
{
Value = sdr[0].ToString(),
Text = sdr[1].ToString()
});
}
}
return type;
}
}
根据类别下拉列表的所选项目填充部分下拉列表的代码
function selectpart() {
var partcategory = document.getElementById('<%= slctpartcategory.ClientID %>');
// Check if any of the inputs are empty or null
$.ajax({
type: "POST",
url: "RNI_Agent_PartStockReport.aspx/RNI_Fetch_Part",
data: "{ 'P': { 'FK_Part': '" + partcategory.value + "' } }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var ddlProducts = $("[id*=slctpart]");
ddlProducts.empty().append('<option selected="selected" value="-1">Select Part</option>');
$.each(r.d, function () {
ddlProducts.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
});
}
下面的代码是写在文件（aspx.cs）后面的代码中
[WebMethod]
public static List<ListItem> RNI_Fetch_Part(Properties P)
{
using (cmd = new SqlCommand())
{
List<ListItem> type = new List<ListItem>();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "sp_Fetch_PartsfromCategory";
cmd.Connection = Getconnected.getconnecting();
cmd.Parameters.AddWithValue("@category", P.FK_Part);
using (sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
type.Add(new ListItem
{
Value = sdr[0].ToString(),
Text = sdr[1].ToString()
});
}
}
return type;
}
}
请记住，在任何回发中，页面加载事件都会在代码存根之前触发。因此，如果页面加载中有填充组合框的代码，那么在重新绑定 3 个组合框中的任何一个时，用户的选择将被覆盖。
这意味着您无法重新绑定组合框，因为这样做会丢失当前的选择。在大多数情况下，这实际上是所需的行为，因为如果用户更改组合 2，则组合 3 将级联，并且重新绑定组合 3 的“行为”也意味着组合 3 失去当前选择（并且它应该无论如何）。
对于组合 1 选择也是如此，它现在必须级联组合 2，（选择丢失），当发生这种情况时，您可能应该吹掉（清除）组合 3 选择和数据源。
因此，在“真实”和“第一”页面加载时，您将填写组合 1，组合 2、3 将为空。
现在，上面当然假设服务器端代码，自动回发。
但是，随着 Web 方法的引入，会出现一些警告，因为组合框没有视图状态，也没有回发。
但是，只要您不重新加载现有组合框的数据源，就应该没问题。因此，组合 2 的更改不仅应该重新加载组合 3，而且当然还要在重新加载（级联）组合 3 之前清除组合 3 选择。
因此，检查您的页面加载事件。您几乎总是需要将第一个组合 1 加载代码放置在所有重要的 !IsPostBack 代码存根中。
例如这个：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadData();
}
void LoadData()
{
string strSQL =
@"SELECT * FROM tblHotelsA ORDER BY HotelName";
cboHotels.DataSource = General.MyRst(strSQL);
cboHotels.DataBind();
cboHotels.Items.Insert(0, "Select Hotel");
}
因此，您不会显示页面加载事件，但请记住，如果没有 !IsPostBack 代码存根，那么在任何回发中，如果存在在页面加载中重新加载组合框的代码，它将丢失当前的组合框该组合框的选择。但是，使用 !IsPostBack 代码存根，我们并不关心页面加载事件在任何页面回发时触发，因为我们只在“真正的”首页加载时运行该代码。
此外，您可以转储 ajax，并将 3 个组合放置在更新面板中。然而，毫无疑问，额外的努力并使用 ajax 来填写组合是一条更好的道路，但与 100% 服务器端代码相比，这会带来很多额外的工作。