CODEWITHSUNDEEP
javascriptjqueryhtml
Mohammed Hassar
Mohammed Hassar

Reputation: 553

Check if selects tags has the same value

So I have 4 selects with same class (no ID), and I want when I choose an option to disable it in the other selects,

<select name="column_type[]" class="form-control column_type">
 <option value="none">Ne pas Importer</option>
 <option value="mobile">Mobile</option><option value="mail">Email
 </option><option value="lname">Nom</option>
</select>
....

So plz if someone has any idea I will be very appreciative.

Upvotes: 0

Views: 75

Answers (2)

user2575725
user2575725

Reputation:

Try using jQuery prop() to disable:

$(function() {
  var column_type = $('.column_type');
  column_type.on('change', function() {
    var cur = $(this);
    $.each(column_type, function(_, dd) {
      dd = $(dd);
      if (cur != dd) {
        dd.find('option').eq(cur.prop('selectedIndex')).prop('disabled', true);
      }
    })
  }).eq(0).trigger('change');// fire event on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option>
  <option value="mail">Email
  </option>
  <option value="lname">Nom</option>
</select>

Upvotes: 1

Dhruv Ramani
Dhruv Ramani

Reputation: 2643

From what I have understood as your question,when you select a option in a select tags it disables all the other select tags:

JS: 

function onOptionChange(elem){
     var selects=document.getElementsByClassName("form-control column_type");
     for(var i=0;i<n;i++)
       if(selects[i]!=elem)
         selects[i].options[elem.selectedIndex].disabled=true;
    }

HTML:

<select name="column_type[]" class="form-control column_type" onChange="return onOptionChange(this)">
  <option value="none">Ne pas Importer</option>
  <option value="mobile">Mobile</option><option value="mail">Email</option>
  <option value="lname">Nom</option>
</select>

If that's not what you want, I'll edit the answer

Upvotes: 1

Related Questions