CODEWITHSUNDEEP
javascriptjqueryhtml
Rose
Rose

Reputation: 600

Avoid same option selected multiple times using jquery except the first select tag

I have a table named as Table1 . The table contains two select tag and their values were same.

Now I want to check for each row, there any option exists more than one times. If yes then alert option already selected. But I doesn't want to check the first select tag.

My code is

   $('#table1 tr').each(function() {                                        
     $(this).find('select:gt(0)').change(function(){//alert($(this).val())
      if( $('#table1').find('select option[value='+$(this).val()+']:selected').length>1)
      {
        alert('option is already selected');
        $(this).val($(this).find("option:first").val());   
      }
   });
});

But My problem is: Suppose I selected the option 1(with value1) in first select tag and then I an triying to select the option Volvo(with value1) ,it shows the alert. I just want the alert for select:gt(0) . Whats wrong with my code? http://jsfiddle.net/tu6ce8ab/10/

Upvotes: 1

Views: 1702

Answers (3)

dfsq
dfsq

Reputation: 193261

The problem is that $('#table1').find('select option[value='+$(this).val()+']:selected') selector also checks selects in the first column.

Also note that you need to select elements from the columns greater than first, so you can use nth-child instead #table1 tr td:nth-child(n+2) select.

Try something like this:

var $selects = $('#table1 tr td:nth-child(n+2) select').change(function() {
    if ($selects.find('option[value=' + this.value + ']:selected').length > 1) {
        alert('option is already selected');
        this.options[0].selected = true;
    }    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> Table 1</h3>

<table id="table1" border="1">
    <tr>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
        <td>select any option</td>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">Volvo</option>
                <option value="2">Saab</option>
                <option value="3">VW</option>
                <option value="4">Audi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
        <td>select any option</td>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">Volvo</option>
                <option value="2">Saab</option>
                <option value="3">VW</option>
                <option value="4">Audi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </td>
        <td>select any option</td>
        <td>
            <select>
                <option value="--select--">--select--</option>
                <option value="1">Volvo</option>
                <option value="2">Saab</option>
                <option value="3">VW</option>
                <option value="4">Audi</option>
            </select>
        </td>
    </tr>
</table>
<br>

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You just need check option for the 2nd dropdown on each row like one below and you missed :gt(0) while checking

DEMO

$('#table1 tr').each(function() {                                       
    $(this).find('select:gt(0)').change(function(){//alert($(this).val())
        if( $('#table1').find('select:gt(0) option[value='+$(this).val()+']:selected').length>1){
                                    //^^^^^Need this
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());   
        }
    });
});

Upvotes: 2

Abdul H Kidwai
Abdul H Kidwai

Reputation: 1

You have 2 options 1. Assign an ID to and then use that id instead of using table id and finding select. Meaning you can change $(this).find('select:gt(0)').change() to $('#select1').change()

  1. Change the second dropdown option values. For exmaple, instead of Volvo, use Volvo

Upvotes: -1

Related Questions