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

这是因为范围。

当你使用＆＃34;这个＆＃34;在行：

$('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/

根据以前的DropDownList选择禁用DropDownList

1 个答案: