Is there a way to hide option or optgroup HTML elements? I've tried calling hide() in jQuery, and also using regular Javascript to set style.display='none'.
It works in Firefox but not in any other browsers. Actually removing them from the DOM does work, so perhaps there's a way to save each DOM element when it's removed, and reinsert them in the same place?
My HTML is like this:
<select name="propsearch[area]" id="propsearch_area">
<option value="0">- Any -</option>
<optgroup label="Bristol">
<option value="Hotwells">Hotwells</option>
<option value="Montpelier">Montpelier</option>
</optgroup>
<optgroup label="Cardiff">
<option value="Heath">Heath</option>
<option value="Roath">Roath</option>
</optgroup>
<optgroup label="Exeter">
<option value="Pennsylvania Road">Pennsylvania Road</option>
<option value="Lower North Street">Lower North Street</option>
</optgroup>
<optgroup label="Swansea">
<option value="Brynmill">Brynmill</option>
<option value="Uplands">Uplands</option>
</optgroup>
</select>
I figured that this solution works fine for me:
Make another select e.g.
$("#footer_canvas").after('<select id="parkingLot"></select>');
then hide it
$("#parkingLot").hide();
When you want to 'hide' some optgroup, just 'park' it in this hidden select.
$('#VehicleVehicleCategoryId optgroup[label="kategorie L"]').appendTo("#parkingLot");
Same way you can make it visible.
This is just the snippets of my solution, that works fine for me.
Related
I am looking for a way to select an option from a drop down list using the item class, and containing text. For example
<select class="mySelect">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
I cannot use the select ID because it might change, but the class will always be the same. I want to do, if option has the word Test, make the color of the word "Test" blue.
I think I can handle the color assignment, but what I am having an issue with is using the class to select the child options. I have tried:
$('.mySelect option:contains("Test")');
However I get an error that this is not a valid selector.
I also tried:
$('.mySelect select option:contains("Test")');
Finally, thanks to comments, I tried
$('select option[value*="Test"]')
However, this only returns the first item.
OK, here is the actual code in production, lets see if this changes anything.
<select onclick="SetChoiceOption('ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownButton')" name="ctl00$ctl40$g_6a07f243_6d33_4cb8_bf98_47743415ee4a$ctl00$ctl05$ctl05$ctl00$ctl00$ctl05$ctl00$DropDownChoice" id="ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownChoice" title="Category: Choice Drop Down" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Meeting Test">Meeting Test</option>
<option value="Work hours Test">Work hours Test</option>
<option value="Business Test">Business Test</option>
<option value="Holiday Test">Holiday Test</option>
<option value="Get-together Test">Get-together Test</option>
<option value="Gifts Test">Gifts Test</option>
<option value="Birthday Test">Birthday Test</option>
<option value="Anniversary Test">Anniversary Test</option>
</select>
Here is a fiddle that returns each as text, but, somehow does not return the elements.
https://jsfiddle.net/3hgpw778/
$('.mySelect option:contains("Test")'); is valid and is selecting the three options. but as an alternative you can try this:
$('select option[value^="Test"]')
$$('select option[value*="Test"]');
was the answer. I got the additional piece from Simple jQuery selector only selects first element in Chrome..?
If I have the multiselect directly on the page, it works and displays fine; but if I have the multiselect on the popup, the display is wrong and it only shows one element. Can someone tell me why and how to fix it?
I show my problem in this jsfiddle: http://jsfiddle.net/uvvm40Lu/4/ (click on the popup link).
And this is my code:
<select id="transactionType0" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
popup
<div id="popup1" data-role="popup" data-overlay-theme="a">
<select id="transactionType1" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
If you look at the popup documentation: http://api.jquerymobile.com/1.3/popup/, you will see that it does not support popup chaining (i.e. one popup open over another popup). Unfortunately the multi-select uses a popup to display the choices, so it violates the popup chaining issue.
There is a jQM plugin called simpledialog2 that does allow chaining: http://dev.jtsage.com/jQM-SimpleDialog/demos2/, or you can roll your own.
Why doesn't this work when a select has optgroups in it?
doesn't work
$("option:first-child").attr("selected", "selected");
works
$("select>option:first-child").attr("selected", "selected");
When I do $("select:eq(1) option:first-child").val() it appears to be getting the right option, but when I call attr() it isn't picking the right one.
Example: http://jsfiddle.net/7J2Yb/
If you check the value of $("option:first-child").length you will notice that it is 5. :first-child is selecting options that are the first child of their parent, which are:
<SELECT id='a'>
<OPTION selected value=0>(all)</OPTION><!-- THIS ONE -->
<OPTION value=1>A</OPTION>
<OPTION value=2>B</OPTION>
<OPTION value=3>C</OPTION>
</SELECT>
<SELECT id='b'>
<OPTION selected value=0>(all)</OPTION><!-- THIS ONE -->
<optgroup label="A">
<OPTION value=1>A</OPTION><!-- THIS ONE -->
</optgroup>
<optgroup label="B">
<OPTION value=2>B</OPTION><!-- THIS ONE -->
</optgroup>
<optgroup label="C">
<OPTION value=3>C</OPTION><!-- THIS ONE -->
</optgroup>
</SELECT>
Furthermore $("select:eq(1) option:first-child").length is equal to 4 for the same reason above. Calling .val() on the array outputs the first elements value, but the selector is selecting all 4 of them.
If you want to select the first element in each select write:
$("select").find("option:first").attr("selected", true);
working example: http://jsfiddle.net/hunter/7J2Yb/2/
I am trying to implement the jquery selectbox script. I have made all the changes needed to css and html markup and the selectbox is working and appearing fine. the problem is. It is not initializing automatically at page load.
I have to manually run $("SELECT").selectBox(); from the firebug script panel to make it work. I have tried everything from putting hte initializing command at the bottom of the page, and putting it in $(document).ready() as well. Nothing works. What am i missing?
EDIT: The code I am running involves dynamic select box generation from the server.
I googling for a solution to a similar problem, but found nothing.
It's giant waste of time. So I will just share the solution found.
I tried to remove element created by selectbox <span class="selectbox">...</span> before re-initializing, and its work.
$('#select').prev().remove();
$('#select').selectbox();
hope this helps.
Did you initialize it before the select boxes? It has to be initialized before them. And make sure jQuery is loaded before you do anything jQuery. (duh)
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.selectBox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").selectBox();
});
</script>
<select name="standard-dropdown">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3 has <a> really long label but it won't affect the control's display at all</option>
<option value="4">Item 4</option>
<option value="5" disabled="disabled">Item 5 (disabled)</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9">Item 9</option>
<option value="10">Item 10</option>
<option value="11">Item 11</option>
<option value="12">Item 12</option>
<option value="13">Item 13</option>
<option value="14">Item 14</option>
<option value="15" selected="selected">Item 15</option>
<option value="16">Item 16</option>
<option value="17">Item 17</option>
<option value="18">Item 18</option>
<option value="19">Item 19</option>
<option value="20">Item 20</option>
</select>
Hope this helps.
P.S Maybe you could show us full code, or a link to where you're having the issue?
The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing great) and option disappear. How can one get over this bug?
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';">
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>
I changed the code do it conditionally. Now it is working fine. Check it.
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;"
OnMouseOver="this.style.width='auto';" onmouseout="if(!this.focussed) {this.style.width='200px';}" onfocus="this.focussed=true;" onblur="this.style.width='200px';this.focussed=false;" >
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>