Hiding Options of a Select with JQuery
- by Syed Abdul Rahman
Okay, let's start with an example.
Keep in mind, this is only 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 from here, we have a dropdown with 3 options.
What I want to do now is to hide an option.
Adding style = "display:none" will not help.
The option would not appear in the dropdownlist, but using the arrow keys, you can still select it.
Essentially, it does exactly what the code says. It isn't displayed, and it stops there.
A JQuery function of $("#1").hide() will not work.
Plus, I don't only want to hide the option, I want to completely remove it.
Any possibility on doing so?
Do I have to use parent/sibling/child elements? If so, I'm still not sure how.
Any help on this would be greatly appreciated. Thanks.
Another question - It's related
Ok, so I found out that there is a .remove() available in JQuery. Works well.
But what if I want to bring it back?
if(condition)
{
$(this).remove();
}
I can loops this. Shouldn't be complicated.
But the thing of which I am trying to do is this:
Maximum Capacity of Class: (Input field here)
Select Room: (Dropdown here)
What I'd like for it to do is to update is Dropdown using a function such as .change() or .keyup.
I could create the dropdown only after something is typed. At a change or a keyup, execute the dropdown accordingly.
But what I am doing is this:
$roomarray = mysql_query("SELECT *
FROM
(
SELECT *,
CASE
WHEN type = 'Classroom' THEN 1
WHEN type = 'Computer laboratory' THEN 2
WHEN type = 'Lecture Hall' THEN 3
WHEN type = 'Auditorium' THEN 4
END AS ClassTypeValue
FROM rooms
) 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 " "; echo $rooms['roomID']; echo " ("; echo $rooms['maxppl']; echo ")"; ?></option>
<?php
}
echo "</select>";
Yes, I know it is very messy.
I plan to change it later on.
But the issue now is this: Can I toggle the removal of the options according to what has been typed?
Is it possible to do so with a dropdown made from a loop? Because I sure as hell can't keep executing SQL Queries. Or is that even an option? Because if it's possible, I still think it's a bad one.
