级联填充下拉列表，并将每个下拉列表设置在其第一个值之前

Question

在我的项目中，我正在制作一个表单，其中包含三个下拉列表，每个公司，部门和空缺与“选择”作为他们的默认文本。我感觉在表单加载事件的公司下拉列表，但默认文本是“选择”现在当用户选择公司时，第二个列表应该填充所选公司的部门，但默认文本应该是“选择”。同样，当用户选择部门时，第三个列表应填充所选公司所选部门的空缺，但默认文本应为" select“。我正在尝试分别用公司列表和部门列表的"selected index change“事件填充另外两个下拉列表。但它并不像我想要的那样工作。

这是我的.aspx页面代码。

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table width="100%">
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td align="center" class="tdtitle" colspan="4">
                Search Candidates
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td class="RowHeight" width="20%">
                Select Company</td>
            <td width="30%">
                <asp:DropDownList ID="companyList" runat="server" AutoPostBack="True" 
                 onselectedindexchanged="companyList_SelectedIndexChanged" Width="150px">
                <asp:ListItem>-Select Company-</asp:ListItem></asp:DropDownList>
            </td>
            <td width="20%">
                Select Department</td>
            <td width="30%">
                <asp:DropDownList ID="deptList" runat="server" AutoPostBack="True" 
                    Width="150px" onselectedindexchanged="deptList_SelectedIndexChanged" onclick="Validate();">
                <asp:ListItem>-Select Department-</asp:ListItem></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td class="RowHeight" width="20%">
                Select Vacancy</td>
            <td colspan="3" width="*">
                <asp:DropDownList ID="vacanyList" runat="server" Width="200px">
                <asp:ListItem>-Select Vacancy-</asp:ListItem></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
        <tr>
            <td align="center" colspan="4">
                <asp:Label ID="notifyLbl" runat="server" Font-Size="Large" ForeColor="Red" 
                    Text="Label"></asp:Label>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                &nbsp;</td>
        </tr>
    </table>
 <script type="text/javascript">

     function alertOnBadSelection() {
         var select = document.getElementById('companyList');
         if (select.options[select.selectedIndex].value == "-Select Company-") {
             alert('Please Select Company!');
             return false;
         }
     }

    </script>
</asp:Content>

下面的/And是我的.aspx.cs页面的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class HR_Department_searcAppForVac : System.Web.UI.Page
{
    DataOperation oDo = new DataOperation();
    protected void Page_Load(object sender, EventArgs e)
    {
       // deptList.Attributes.Add("onchange", "alertOnBadSelection();");

        notifyLbl.Visible = false;
        if (!IsPostBack)
        {
            try
            {
                DataTable objCmpnyTable = oDo.DropDownList("select * from tblCompanyMaster");
                if (objCmpnyTable.Rows.Count > 0)
                {
                    foreach (DataRow Row in objCmpnyTable.Rows)
                    {
                        companyList.Items.Add(new ListItem(Row["CompName"].ToString(), Row["CompId"].ToString()));
                    }
                }
                else
                {
                    notifyLbl.Visible = true;
                    notifyLbl.Text = "There is not any company in the list.";
                }
            }
            catch (Exception)
            {

                throw;
            }
        }
        else
        {
            //deptList.SelectedIndex = -1;
            //vacanyList.SelectedIndex = 1;
        }
    }
    protected void companyList_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            if (companyList.SelectedIndex > 0)
            {
                deptList.Items.Clear();
                string str = "select * from vwCompWiseList where CompId=" + companyList.SelectedValue;
                DataTable objDeptTable = oDo.DropDownList("select DeptId,DeptName from vwCompWiseDept where CompId= "+companyList.SelectedValue);
                if (objDeptTable.Rows.Count > 0)
                {
                    foreach (DataRow Row in objDeptTable.Rows)
                    {
                        deptList.Items.Add(new ListItem(Row["DeptName"].ToString(), Row["DeptId"].ToString()));
                    }

                }
            }
            else
            {
                notifyLbl.Visible = true;
                notifyLbl.Text = "Select Company....";
            }
        }
        catch (Exception)
        {

            throw;
        }    
    }
    protected void deptList_SelectedIndexChanged(object sender, EventArgs e)
    {
        try
        {
            if (deptList.SelectedIndex > 0)
            {
                vacanyList.Items.Clear();
                DataTable objVacancytbl = oDo.DropDownList("select VacId,VacTitle from tblVacancyMaster where DeptId =" + deptList.SelectedValue + " and CompId=" + companyList.SelectedValue);
                if (objVacancytbl.Rows.Count > 0)
                {
                    foreach (DataRow Row in objVacancytbl.Rows)
                    {
                        vacanyList.Items.Add(new ListItem(Row["VacTitle"].ToString(), Row["VacId"].ToString()));
                    }
                    vacanyList.SelectedIndex = -1;
                    vacanyList.ClearSelection();

                }
                else
                {
                    notifyLbl.Visible = true;
                    notifyLbl.Text = "Ops..!There is no available vacancy....";
                }
            }
            else
            {
                notifyLbl.Visible = true;
                notifyLbl.Text = "Select Department...";
            }
        }
        catch (Exception)
        {

            throw;
        }
    }
}

请展示我的问题和解决方案。

Answer 1

我认为您可能想要利用jquery cascading drop downs 。使用级联下拉javascript (jquery)将根据在上一个下拉列表中选择的值回调和重新加载依赖的下拉列表。