jQuery Mobile: disable selected option in other select menus

Question

I have three select menus on my jQuery mobile page. If the user selects an option, I want this option to be disabled in the other select menus.

So far, I have managed to have the option disabled in the select element, but NOT in the options popup. The user can still select an option in the popup, but I want to prevent this.

Here comes my fiddle: http://jsfiddle.net/asvyY/57/

My code:

HTML:

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <form>
            <select class="filter-menu" data-native-menu="false">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
            </select>

            <select class="filter-menu" data-native-menu="false">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
            </select>

            <select class="filter-menu" data-native-menu="false">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
            </select>
        </form>
    </div>
</div>

My JS:

$('.filter-menu').on('change', function() {
  var $changedSelect = $(this);
  var selectedId = $(this).val();

  $('.filter-menu').not($changedSelect).each(function() {
      $(this).find('option[value=' + selectedId + ']').attr('disabled', 'disabled')
  });
});

Answer 1

Solution:

http://jsfiddle.net/asvyY/59/

$('.filter-menu').on('change', function () {
            $('.filter-menu').find('option').prop('disabled', false);

           $('.filter-menu').each(function () {
               $('.filter-menu').not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
            });

            // rebuild select menus
            $('select').selectmenu('refresh', true);
});

Rebuilding the select menus is necessary, as it is jQuery Mobile.

Answer 2

Try this on your phone, it makes the option physically unselectable (but not visibly)

$('select.filter-menu').not($changedSelect).each(function() {
    $(this).find('option[value="' + selectedId.toString() + '"]').prop('disabled', true);
});