Prevent Multiple Selections of Same Value for each table row

Question

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

You forgot to post the JavaScript that you tried which didn't work. — j08691, Dec 15 '14 at 18:18

score 3 · Accepted Answer · answered Dec 15 '14 at 18:24

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");   

});

score 0 · Answer 2 · edited Jan 05 '21 at 09:27


$(".question").change(function(){

  $(".question option").prop("disabled", true); //enable everything

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

  //disable elements
  $(".question option").filter(function () {
      return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
  }).prop("disabled", true);

  //re-enable elements
  $(".question option").filter(function () {
      return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
  }).prop("disabled",false);

  $(".question").selectpicker('refresh');
});

Prevent Multiple Selections of Same Value for each table row

2 Answers2