javascript - jQuery 手机 : disable selected option in other select menus

Question

我的 jQuery 移动页面上有三个选择菜单。如果用户选择了一个选项，我希望在其他选择菜单中禁用该选项。

到目前为止，我已经设法在选择元素中禁用该选项，但在选项弹出窗口中没有。用户仍然可以在弹出窗口中选择一个选项，但我想阻止这种情况。

我的 fiddle 来了: http://jsfiddle.net/asvyY/57/

我的代码:

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>

我的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

解决方法:

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

重建选择菜单是必要的，因为它是 jQuery Mobile。