Question

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

到目前为止，我已设法在select元素中禁用该选项，但不在选项弹出窗口中禁用。用户仍然可以在弹出窗口中选择一个选项，但我想阻止它。

我的代码：

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。

Answer 2

在您的手机上尝试此选项，它会使选项在物理上无法选择（但不明显）

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

jQuery Mobile：在其他选择菜单中禁用所选选项

2 个答案: