Avoid same option selected multiple times using jquery

后端 未结 5 1613
星月不相逢
星月不相逢 2021-02-20 08:38

I have two tables Table1 and Table2. Each table contains

提交评论

  • 2021-02-20 09:14
    $('#table1 tr').each(function() {
        $(this).find('select').change(function() { //alert($(this).val())
            if ($('#table1 tr td select  option[value=' + $(this).val() + ']:selected').length > 1) {
                alert('option is already selected');
                $(this).val($(this).find("option:first").val());
            }
        });
    });
    
    $('#table2 tr').each(function() {
        $(this).find('select').change(function() { //alert($(this).val())
            if ($('#table2 tr td select option[value=' + $(this).val() + ']:selected').length > 1) {
                alert('option is already selected');
                $(this).val($(this).find("option:first").val());
            }
        });
    });
    
    0 讨论(0)
  • 2021-02-20 09:20

    If you change your if statements to be specific to each table that should do it. So:

    if($('#table1 tr option[value='+$(this).val()+']:selected').length>1)
    

    and if($('#table2 tr option[value='+$(this).val()+']:selected').length>1)

    and actually if you changed the selector to parent selectors you could use just the one code block of any table of this kind:

    $('table').each(function() {
        $(this).find('select').change(function() {
    
            if ($(this).parent().parent().parent().parent().find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
                alert('option is already selected');
                $(this).val($(this).find("option:first").val()); //put it back to 1
            }
        });
    });
    

    In this one it loops through all tables and on the change event finds the table its part of (so the id doesn't matter) and then runs your check as you had it before.

    And even better than that you could use the .closest selector

    $('table').each(function() {
        $(this).find('select').change(function() {
    
            if ($(this).closest('table').find($('tr option[value=' + $(this).val() + ']:selected')).length > 1) {
                alert('option is already selected');
                $(this).val($(this).find("option:first").val()); //put it back to 1
            }
        });
    });
    
    0 讨论(0)
  • 2021-02-20 09:27

    You are selecting all the options instead of in the current table.

    Live Demo

    Change

    $('option[value=' + $(this).val() + ']:selected')
    

    To

    $(this).closest('table').find('option[value='+$(this).val()+']:selected')
    

    You can make single handler instead of multiple for each row and further simplify and optimize code like this.

    $('select').change(function () {
        if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1)
        {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
    
    0 讨论(0)
  • 2021-02-20 09:28

    Try with attribute selector in jquery

    $('[id ^= "table"] tr').find('select').change(function() {
        if ($(this).closest('table').find('option[value=' + $(this).val() + ']:selected').length > 1) {
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
    

    Fiddle

    0 讨论(0)
  • 提交回复
    热议问题