根据先前的 DropDownList 选择禁用 DropDownList

Question

我有两个 ASP.Net 下拉列表，其中的值相同，根据用户输入的不同数据从数据库中填充，并且每次都具有动态大小。我的情况是，我希望禁用第二个下拉列表中已在第一个下拉列表中选择的任何选项。我做了一些谷歌，大多数结果都在<select></select> 上，而不是<asp:DropDownList></asp:DropDownList> 的 ASP.Net 下拉列表

我尝试过遵循 java 脚本并使用 <select></select>，但它也不起作用。

<script>
    $('select').on('change', function () {

        $('select').find('option').prop('disabled', false);

        $('select').each(function () {
            $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
        });

    });
</script>

按钮代码

protected void AddStudentSubjectB_Click(object sender, EventArgs e)
{
    OnRowDataBoundSubject();
    if(StudentSubjectDDL.Items.Count > 0)
    {
        AddStudentSubjectB.Enabled = false;
        StudentSubjectDDL.Visible = true;
        EnrollStudentSubjectB.Visible = true;
        CancelEnrollStudentSubjectB.Visible = true;
        AddStudentSubjectB1.Visible = true;
    }
}

下拉列表填充代码

private void OnRowDataBoundSubject()
{
    StudentSubjectDDL.DataSource = GetData("SELECT SUB.ID, SUB.NAME FROM SUBJECT SUB LEFT JOIN RESULT RES ON RES.SUBJECT = SUB.ID WHERE RES.SUBJECT IS NULL OR RES.ID != '" + StudentID1.Text.Trim() + "' AND SUB.COURSE = '" + StudentCourse1.Text.Trim() + "';");
    StudentSubjectDDL.DataTextField = "NAME";
    StudentSubjectDDL.DataValueField = "ID";
    StudentSubjectDDL.DataBind();
}

Answer 1

这是因为范围。

当你在行中使用“this”时：

$('select').each(function () {
    $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
});

您实际上是指选择本身而不是外部选择，因此您需要将外部选择保存在这样的变量中：

$('select').on('change', function () {
    var outer = this;
    $('select').find('option').prop('disabled', false);

    $('select').each(function () {
        $('select').not(outer).find('option[value="' + outer.value + '"]').prop('disabled', true);
    });
});

看到这个小提琴：https://jsfiddle.net/nbvsd28z/1/

编辑：

我做了这个小提琴，当动态添加下拉菜单时选项被禁用：https://jsfiddle.net/m6wxg8x0/2/