我的 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')
});
});
最佳答案
解决方法:
$('.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。
关于javascript - jQuery 手机 : disable selected option in other select menus,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31470201/