在 jQuery-UI 选择菜单中隐藏选项
Hide option in jQuery-UI selectmenu
将选项隐藏在 select 中很容易。
jQuery("#bbb").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
但是它在 Selectmenu UI 中是如何工作的?我只能删除选项,但隐藏它们似乎是不可能的。
例如,我尝试在 select Farbe:
上隐藏选项 'RAL Sonderfarbe'
尝试(在开发控制台中):
var $el = jQuery('option:contains("RAL Sonderfarbe")');
$el.hide();
$hausfux_laenge_dropdown.find('select').selectmenu('refresh');
但是不行。
我找到了解决方法,但如果调用 selectmenu('refresh');
,则该选项会再次出现...
$('#mySelect').selectmenu();
var mySelectOpened = false;
$('#mySelect').selectmenu({
open: function(event, ui) {
if (mySelectOpened == false) {
mySelectOpened = true;
var $el1 = $('#mySelect option:contains("B")');
var $el2 = $('li:contains("B")');
$el1.hide();
$el2.hide();
}
}
});
$("#refresh").click(function() {
$('#mySelect').selectmenu('refresh');
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
<button id="refresh">Refresh Selectmenu UI</button>
将选项的 disabled
属性设置为 true
,这将为该选项生成 li
ui-state-disabled
的 class,这然后你可以使用 CSS:
隐藏
$(function() {
var $el = jQuery('option:contains("B")');
$el.attr('disabled',true);
$('#mySelect').selectmenu();
});
li.ui-state-disabled {
display:none;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
但是所有禁用的选项都是不可见的。
我通过扩展核心 jQuery UI javascript 和 css.
解决了这个问题
示例:
var $el = jQuery('option:contains("B")');
$('#mySelect').selectmenu();
jQuery('#hide_option_b').click(function() {
$el.attr('hidden',true);
$('#mySelect').selectmenu('refresh');
});
jQuery('#show_option_b').click(function() {
$el.attr('hidden',false);
$('#mySelect').selectmenu('refresh');
});
<link href="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
<button id="hide_option_b">Hide option B</button>
<button id="show_option_b">Show option B</button>
我将此添加到 jquery-ui.css
(https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.css)
/* Hidden */
.ui-state-hidden { display: none; }
我 changed/added jquery-ui.min.js
中的一些行 (https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.js):
已从 _renderItem
更改为:
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", {
title: item.element.attr( "title" )
} );
if ( item.disabled ) {
this._addClass( li, null, "ui-state-disabled" );
}
this._setText( wrapper, item.label );
return li.append( wrapper ).appendTo( ul );
},
到
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", {
title: item.element.attr( "title" )
} );
if ( item.disabled ) {
this._addClass( li, null, "ui-state-disabled" );
}
if ( item.hidden ) {
this._addClass( li, null, "ui-state-hidden" );
}
this._setText( wrapper, item.label );
return li.append( wrapper ).appendTo( ul );
},
并且 _parseOption
来自:
_parseOption: function( option, index ) {
var optgroup = option.parent( "optgroup" );
return {
element: option,
index: index,
value: option.val(),
label: option.text(),
optgroup: optgroup.attr( "label" ) || "",
disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
};
},
到
_parseOption: function( option, index ) {
var optgroup = option.parent( "optgroup" );
return {
element: option,
index: index,
value: option.val(),
label: option.text(),
optgroup: optgroup.attr( "label" ) || "",
disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
hidden: optgroup.prop( "hidden" ) || optgroup.css( "display" ) == "none" || optgroup.css( "visibility" ) == "hidden"
|| option.prop( "hidden" ) || option.css( "display" ) == "none" || option.css( "visibility" ) == "hidden"
};
},
现在可以自动检测并隐藏隐藏的选项。
将选项隐藏在 select 中很容易。
jQuery("#bbb").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
但是它在 Selectmenu UI 中是如何工作的?我只能删除选项,但隐藏它们似乎是不可能的。
例如,我尝试在 select Farbe:
上隐藏选项 'RAL Sonderfarbe'尝试(在开发控制台中):
var $el = jQuery('option:contains("RAL Sonderfarbe")');
$el.hide();
$hausfux_laenge_dropdown.find('select').selectmenu('refresh');
但是不行。
我找到了解决方法,但如果调用 selectmenu('refresh');
,则该选项会再次出现...
$('#mySelect').selectmenu();
var mySelectOpened = false;
$('#mySelect').selectmenu({
open: function(event, ui) {
if (mySelectOpened == false) {
mySelectOpened = true;
var $el1 = $('#mySelect option:contains("B")');
var $el2 = $('li:contains("B")');
$el1.hide();
$el2.hide();
}
}
});
$("#refresh").click(function() {
$('#mySelect').selectmenu('refresh');
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
<button id="refresh">Refresh Selectmenu UI</button>
将选项的 disabled
属性设置为 true
,这将为该选项生成 li
ui-state-disabled
的 class,这然后你可以使用 CSS:
$(function() {
var $el = jQuery('option:contains("B")');
$el.attr('disabled',true);
$('#mySelect').selectmenu();
});
li.ui-state-disabled {
display:none;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
但是所有禁用的选项都是不可见的。
我通过扩展核心 jQuery UI javascript 和 css.
解决了这个问题示例:
var $el = jQuery('option:contains("B")');
$('#mySelect').selectmenu();
jQuery('#hide_option_b').click(function() {
$el.attr('hidden',true);
$('#mySelect').selectmenu('refresh');
});
jQuery('#show_option_b').click(function() {
$el.attr('hidden',false);
$('#mySelect').selectmenu('refresh');
});
<link href="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js"></script>
<select id="mySelect">
<option id="aaa">A</option>
<option id="bbb">B</option>
<option id="ccc">C</option>
</select>
<button id="hide_option_b">Hide option B</button>
<button id="show_option_b">Show option B</button>
我将此添加到 jquery-ui.css
(https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.css)
/* Hidden */
.ui-state-hidden { display: none; }
我 changed/added jquery-ui.min.js
中的一些行 (https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.js):
已从 _renderItem
更改为:
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", {
title: item.element.attr( "title" )
} );
if ( item.disabled ) {
this._addClass( li, null, "ui-state-disabled" );
}
this._setText( wrapper, item.label );
return li.append( wrapper ).appendTo( ul );
},
到
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", {
title: item.element.attr( "title" )
} );
if ( item.disabled ) {
this._addClass( li, null, "ui-state-disabled" );
}
if ( item.hidden ) {
this._addClass( li, null, "ui-state-hidden" );
}
this._setText( wrapper, item.label );
return li.append( wrapper ).appendTo( ul );
},
并且 _parseOption
来自:
_parseOption: function( option, index ) {
var optgroup = option.parent( "optgroup" );
return {
element: option,
index: index,
value: option.val(),
label: option.text(),
optgroup: optgroup.attr( "label" ) || "",
disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
};
},
到
_parseOption: function( option, index ) {
var optgroup = option.parent( "optgroup" );
return {
element: option,
index: index,
value: option.val(),
label: option.text(),
optgroup: optgroup.attr( "label" ) || "",
disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ),
hidden: optgroup.prop( "hidden" ) || optgroup.css( "display" ) == "none" || optgroup.css( "visibility" ) == "hidden"
|| option.prop( "hidden" ) || option.css( "display" ) == "none" || option.css( "visibility" ) == "hidden"
};
},
现在可以自动检测并隐藏隐藏的选项。