javascript - 根据先前的 DropDownList 选择禁用 DropDownList

Question

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

我尝试遵循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);
    });
});

看到这个 fiddle :https://jsfiddle.net/nbvsd28z/1/

编辑:

我制作了这个 fiddle ，当动态添加下拉菜单时禁用选项:https://jsfiddle.net/m6wxg8x0/2/