Hide options using jQuery

Question

Ok, let's start with an example.
Keep in mind this is just an example.

<select id = "selection1">
<option value = "1" id = "1">Number 1</option>
<option value = "2" id = "2">Number 2</option>
<option value = "3" id = "3">Number 3</option>
</select>

Now we have a drop-down list with three parameters.
Now I want to hide the option.

Adding style = "display:none" will help.
The option will not appear in the drop-down list, but using the arrow keys you can still select it.
Essentially, it does exactly what the code says. It does not appear, and it stops.

The jQuery $("#1").hide() function will not work.
In addition, I do not just want to hide this option, I want to completely remove it.

Is there such an opportunity?
Should I use parent / sibling / child elements? If so, I'm still not sure how to do it.

Any help on this would be greatly appreciated. Thanks.

Another question - He tied

So, I found out that there is .remove() in jQuery. It works well.
But what if I want to return it?

if (condition)
{
$ (this) .remove ();
}

I can do it. It should not be difficult.
But what I'm trying to do is the following:

Maximum class capacity: (input field here)
Select a room: (drop-down list here)

I would like this update to be Dropdown with a function like .change() or .keyup .
I could only create a drop-down list after something is printed. When changing or in the keyboard, follow the drop-down list accordingly.
But I do this:

$ roomarray = mysql_query ("SELECT *
of
(
HAPPENING
WHEN type = 'Auditorium' THEN 4
END AS ClassTypeValue
FROM numbers
) t
ORDER BY ClassTypeValue, maxppl, roomID ");

 echo "<select id = \"room\">"; while ($rooms = mysql_fetch_array($roomarray)) { ?> <option value=<?php echo $rooms['roomID']; ?> id=<?php echo $rooms['roomID']; ?>><?php echo $rooms['type']; echo "&nbsp;"; echo $rooms['roomID']; echo "&nbsp;("; echo $rooms['maxppl']; echo ")"; ?></option> <?php } echo "</select>"; 

Yes, I know this is very dirty. I plan to change it later.

But now the problem is this: can I switch the removal of options according to what was printed?

Can this be done with a drop-down list from a loop? Since I'm sure the devil cannot continue to execute SQL queries. Or is it even an option? Because, if possible, I still think it's bad.

Answer 1

Hide () does not work for Chrome ... I experimented with a workaround and wrapped it in a plugin, which I called "ExtraBox". The idea is to temporarily save the parameters so that we can enable / disable them by manipulating the DOM. I created a plugin to make it easier to use.

I posted the code on jsFiddle, so you can try it yourself: http://jsfiddle.net/KeesCBakker/HaFRC/ . [note: first project in jsFiddle, i love it!]

Html example:

 Select: <br/> <select id="TestKees"> <option value="1" class="s1">First value</option> <option value="2" class="s2">Second value</option> <option value="3" class="s3">Third value</option> </select> <br/> Enable / Disable <br/> <input id="txt" type="text" value="s2" /> <button id="btnEnable">Enable</button> 

I added the following jQuery to my document.ready function:

 $('#TestKees').extraBox({ attribute: 'class' }); $('#btnEnable').click(function(){ $('#TestKees').data('extraBox').enable( $('#txt').val() ); }); $('#btnDisable').click(function(){ $('#TestKees').data('extraBox').disable( $('#txt').val() ); }); 

The plugin looks like this:

 (function($) { // Create ExtraBox object function ExtraBox(el, options) { // Default options for the plugin (configurable) this.defaults = { attribute: 'class' }; // Combine default and options objects this.opts = $.extend({}, this.defaults, options); // Non-configurable variables this.$el = $(el); this.items = new Array(); }; // Separate functionality from object creation ExtraBox.prototype = { init: function() { var _this = this; $('option', this.$el).each(function(i, obj) { var $el = $(obj); $el.data('status', 'enabled'); _this.items.push({ attribute: $el.attr(_this.opts.attribute), $el: $el }); }); }, disable: function(key){ $.each(this.items, function(i, item){ if(item.attribute == key){ item.$el.remove(); item.$el.data('status', 'disabled'); } }); }, enable: function(key){ var _this = this; $.each(this.items, function(i, item){ if(item.attribute == key){ var t = i + 1; while(true) { if(t < _this.items.length) { if(_this.items[t].$el.data('status') == 'enabled') { _this.items[t].$el.before(item.$el); item.$el.data('status', 'enabled'); break; } else { t++; } } else { _this.$el.append(item.$el); item.$el.data('status', 'enabled'); break; } } } }); } }; // The actual plugin - make sure to test // that the element actually exists. $.fn.extraBox = function(options) { if (this.length) { this.each(function() { var rev = new ExtraBox(this, options); rev.init(); $(this).data('extraBox', rev); }); } }; })(jQuery); 

Answer 2

Why do you bother with display settings if you just want to delete an item?

 $('#1').remove(); 

and it was gone.

Answer 3

As far as I know, this is not possible initially. You can disable <option> node tho. To finish hiding / deleting, you will need to write some kind of custom code.

 $('option').attr('disable', true); 

By the way, you should not use any number as an identifier for an element. using somekind prefix i.e. option_1 .

in fact, you can hide the <option> node, but is not compatible with a cross browser.

Answer 4

I suppose your selector is wrong. Try something like this (updated):

 <html> <head> <title>MooExample</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#click").click(function() { $("#selection1 #1").remove(); //$("#selection1 > #1").toggle(); // Hide OR show }); }); </script> </head> <body> <select id="selection1"> <option value="1" id="1">Number 1</option> <option value="2" id="2">Number 2</option> <option value="3" id="3">Number 3</option> </select> <input type="button" id="click" onclick="moo()" value="click" /> </body> </html> 

See the parent-child selector (parent> child).

Answer 5

I made available the jQuery plugin that solves this perfectly. With it, you will do the following:

 $('#selection1').hideOption('1'); $('#selection1').showOption('1'); 

You can hide and show them as much as you want, and they will keep their original order. It works in all browsers. You can see that in this example: jsFiddle - switch dropdowns

You can get the enable plug-in . If you don’t like plugins, just copy the JavaScript code from it into your own project JavaScript file. See Read the Docs in the plugin for more information!

Answer 6

It is very simple in jQuery

 //For Hide $('#selection1 option[value=1]').hide(); //For Show $('#selection1 option[value=1]').show();