JQuery Mobile: disable the selected option in other selection menus

Question

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

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

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

My code is:

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

Decision:

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

The selection menu needs to be rebuilt, as it is jQuery Mobile.

Answer 2

, ( )

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