HTML select tags + JavaScript

Question

I have several select tags. What I want to do is, if in one of them let's say option one is selected, option one to be disabled in the other select . I have to following code snippet, but it seems like nothing works, or I have inserted it wrongly, or there is something that does not match?

 var $selects = $('select'); $selects.on('change', function() { $("option", $selects).prop("disabled", false); $selects.each(function() { var $select = $(this), $options = $selects.not($select).find('option'), selectedText = $select.children('option:selected').text(); $options.each(function() { if ($(this).text() == selectedText) $(this).prop("disabled", true); }); }); }); $selects.eq(0).trigger('change'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="option" size="1" style="width:80px;" required> <option value="" selected disabled hidden>Rank</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br /> <select name="option" size="1" style="width:80px;" required> <option value="" selected disabled hidden>Rank</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 

Thank you very much in advance!

Answer 1

使用attr函数代替prop函数。

$(this).attr("disabled", true);