jquery

Hide OPTIONS in select box with jQuery

By On May 24, 2012 · Leave a Comment

It seems to be a pretty simple task to hide or show an <OPTION element using a jQuery.
 

$("select option").hide(); //hide elements

$("select option").show(); //show elements

Can’t be easier? However we have a “Great” browser Internet Explorer, that does not understand it. Playing with different possibilities I found one tricky solution to wrap option element with the SPAN tag.

Also make sure we do “wrap” only for Internet Explorer. Otherwise you will have issues with the jQuery .val() method. it will give you incorrect result;

//hide elements
$("select option").each(function(index, val){
	if ($(this).is('option') && (!$(this).parent().is('span')))
		$(this).wrap((navigator.appName == 'Microsoft Internet Explorer') ? '<span>' : null).hide();
});

//show elements
$("select option").each(function(index, val) {
    if(navigator.appName == 'Microsoft Internet Explorer') {
	    if (this.nodeName.toUpperCase() === 'OPTION') {
	        var span = $(this).parent();
	        var opt = this;
	        if($(this).parent().is('span')) {
	        	$(opt).show();
	        	$(span).replaceWith(opt);
	        }
	    }
    } else {
    	$(this).show(); //all other browsers use standard .show()
    }
});

Dima Svirid

Software architect. Ajax/Javascript, HTML5, Android, iPhone/iPad, JAVA, PHP, Cold Fusion, SQL, Air, Flash, Open source software, Frameworks

More Posts

Follow Me:

 

Leave a Reply