We Keep Coding

Javascript solution for hiding dropdown list options

Edit:
Thanks everybody, but nothing seems to work. I am inserting this code in a file that I know is being used and that contains other javascript blocks normally formatted, and this still doesn't work. It works in a fiddle, but not on my code. I guess this is too specific to the platform and extension that I'm trying to modify (this is part of a Magento checkout step modified by a third party extension). I will start looking into replacing the list with a manually generated one. Thanks again.
I am trying to hide an option in a dropdown list that is dinamically generated. The CSS solution doesn't work on all browsers, and even though I have found several similar questions here, neither one offers a solution that works for me.
Here's what my list renders like:
<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option>
<option id="option-11" value="11" >11</option>
<option id="option-12" value="12" >12</option>
<option id="option-13" value="13" >13</option>
<option id="option-14" value="14" >14</option>
<option id="option-15" value="15" >15</option>
<option id="option-16" value="16" >16</option>
<option id="option-17" value="17" >17</option>
<option id="option-18" value="18" >18</option>
<option id="option-19" value="19" >19</option>
<option id="option-20" value="20" >20</option>
</select>
I need to hide the option with value "12" for example.
I am using this JS:
$("#timeselect option[value='12']").remove();
Any advice would be greatly appreciated since I'm new to JS.
Thanks.

Use the hide() function of JQuery: jsFiddle
You can use show() to get it back

Jquery remove by value
$("#timeselect option[value=11]").remove();
Jquery remove by Text
$("#timeselect option:contains(11)").remove();
Jquery to hide a select box option with its value using css
$("#timeselect option[value='11']").hide();
or
$("#timeselect option[value='11']").css('display','none');

I tried in many different ways but this solution seems reasonable and cross browser compatible and I have used in my code. No plugins required simple register function with jquery object
Solution at glance:
(function ($) {
$('#showOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', true);
});
$('#hideOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', false);
});
$.fn.showHideDropdownOptions = function(value, canShowOption) {
$(this).find('option[value="' + value + '"]').map(function () {
return $(this).parent('span').length === 0 ? this : null;
}).wrap('<span>').hide();
if (canShowOption)
$(this).find('option[value="' + value + '"]').unwrap().show();
else
$(this).find('option[value="' + value + '"]').hide();
}
})(jQuery);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/

You can use jQuery remove() function. if you want to remove it permanently from DOM, or if you want to remove and reinsert it use detach()
$("#timeselect option[value='12']").remove();
Or Detach
var value = $("#timeselect option[value='12']").detach();
And reinsert it by using
$("#timeselect").append(value);
http://jsbin.com/iHIrAQE/5/edit
See the example
Another way is you can disable the value so user can see but cannot select
$("#timeselect option[value='12']").attr('disabled','disabled');

How can I highlight an option in a dropdown menu?

I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders

If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});

option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.

There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.

Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>

Inserting a chunk of text as a value of a select menu

So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?

You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/

how to use a different value from that selected in a drop down

I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?

<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.

Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp

<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>

You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>

How do I select an option by class?

I tried using $('.className').show(); and $('.className').hide(); but it doesn't seem to work in IE. Is there another way to group options by class in a drop down list? I found this question but the answer is looking for the value "a" or "c".
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
How do I look for the actual class?
EDIT
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

I've never seen anyone try to call hide/show on option elements before, and I imagine IE just doesn't allow you to do that. The selection is probably matching just fine, but IE is not hiding the elements. The selection for removing would be the same as for calling show hide...
$('.className').remove();
or
$('option.className').remove();
or
$('#theSelect option.className').remove();

You can add the disabled attribute to the options you don't want to use:
http://jsfiddle.net/sadmicrowave/Fnvqb/

$('select[class~="cactus"]')
$('option[class~="cactus"]')
javascript:(function(){
var out = "hi\n";
out += $('*[class~="cactus"]').html2string() ;
alert( out );
})()
For future reference, instead of describing in words the html ... show actual html

This demonstration code shows one way of how you can achieve option filtering... it would need modification to determine which candidate items are removed as I just hardcoded for purpose of demonstration, but it shows you what you need to consider - when you remove the items, you need to consider the ordering by which they're added back. The easiest way to bypass this problem is to keep a copy of the original list and then when you unfilter, just remove the remaining items, replacing them with what was originally there - otherwise you have to worry about keeping sort data.
So here's my drop down definition:
<select id="mySelector">
<option class="group1">Item 1</option>
<option class="group2">Item 2</option>
<option class="group1">Item 3</option>
<option class="group2">Item 4</option>
<option class="group1">Item 5</option>
</select>
<input type="button" id="removeItems" value="Remove candidate items" />
<input type="button" id="addItems" value="Add them back" />
And the jquery to filter/restore the items:
$(function () {
var originalOptionData;
$("#removeItems").bind('click', function () {
/* store original copy for rollback */
originalOptionData = $("#mySelector option");
$("#mySelector option.group2").remove();
});
$("#addItems").bind('click', function () {
var selector = $("#mySelector");
selector.children().remove();
selector.append(originalOptionData);
});
});
This could be turned into a select filter jquery plugin relatively simply I suppose, but I didn't go that far...