Kavin Kavin - 2 months ago 9
Javascript Question

Prevent Multiple Selections of Same Value for each table row

i have some html like this

<table border="1">
<tr>
<td>
<select id="t00">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<select id="t01">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="t10">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<select id="t20">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
</tr>




This is my HTML code genrated by using PHP command i am already did it.

User choose first row first drop down value than the same value is disabled or hide in next drop down value using JQuery or JavaScript.

i want validate this drop down element in each table row not all(entire table) drop down element.

for eg: in first row i selected "volvo" then next select element "volvo" is disabled
in second row i selected same value "volvo" then it also disabled in next select element.

JQuery code not affect all drop down(select) element.

This code is usefull but i want to check each table row

Answer

I use the same code in the link you provided but it's contexted to the table row :

$("select").change(function()
 {
     var tr = $(this).closest("tr");
        tr.find("select option").attr("disabled",""); //enable everything

     //collect the values from selected;
     var  arr = $.map
     (
        tr.find("select option:selected"), function(n)
         {
              return n.value;
          }
      );

    //disable elements
    tr.find("select option").filter(function()
    {

        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
     }).attr("disabled","disabled");   

});