I need to hide certain options from Multiple selection box using Javascript.
I can't got for jQuery, and I am not allowed to.
I have one more dropdown box, I am calling a js function which will be called upon change of the value. The js function will control the options of another multiple select options box, where I need to hide (not remove) options based on dropdown box value.
Any simple js function?
http://jsfiddle.net/zz3dg/
Select and option elements are notoriously hard to style. While you could try setting
display: none;
visibility: hidden;
on the options you wish to hide, I wouldn't expect universal support (even among CSS/JS supporting browsers).
From what I've tried, display:none works in FF but not in Chrome... I tried visibility:hidden|collapsed (and a variety of other alternatives) and that didn't produce the desired results in Chrome either. visibility:hidden hides the text but does not collapse the blank rows as I'd hoped.
I think the only workable solution in Chrome is to detach the filtered option elements (and that seems like a lot of work ATM)
Related
I have multiple instances of select2 elements in my form, but in one of them (which is on a hidden input) I want to just tokenize the input.
I dont want the dropdown to ever show because it always shows "no matches found" and it confuses users. So I need to disable just the dropdown and use select2 as only a tokenizer for that specific element. Is that possible?
(I know I can do this easily with out the plugin but I want to use the plugin as it decorates the tokens and removes icon and it will be uniform with other inputs that use it)
Used the approach described by #Paralife.
Found there is a option dropdownCss which sets the dropdown style. So dropdownCss:{display:'none'} is enough to disable it as well.
I found a solution:
In the constructor, I put the option dropdownCssClass: 'noshow' and then just css it:
.noshow { display:none !important;}
This always hides the whole dropdown.
I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.
I'm doing my own Ajax thing with dropdowns. I've positioned an input over a select tag. When stuff is typed into input it collects from the database and populates the select menu. Problem is its not noticeable. Is there a way to make the select menu open as if a user has clicked on it?
Nope, you're going to have to use something like a DIV with overflow: auto to emulate the behavior of an opened select.
The HTML5 <datalist> element would help out here, but since there are only a few browsers that support it at the moment, you will have to rely on a JS implementation.
The following was the least buggy implementation I could find from a simple Google search
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml. It supports Ajax as well as up/down arrow keys.
StackOverflow also uses it's own implementation of auto-complete when you start typing tags, maybe you can get some ideas from looking at the source code?
I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is :
http://wwwtest.onlineregister.com/logitechreg/
My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)
Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.
I believe the problem is where I set the listeners on the <select>:
<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">
Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.
-Brian J. Stinar-
Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.
See http://docs.jquery.com/Events/bind
I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).
Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).
replace the this.blur() with the following command
this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);
If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.
Looking to place different icons in front of items/options in a HTML select box.
In theory, you could make use of the CSS background-image property in the <option> element, but that doesn't work flawlessly in (cough) IE.
Best what you can do is to use jQuery/Javascript to mimic a dropdown with a bunch of <li> or <div> elements. As far no one comes to mind (I've never had the need for such a dropdown), but you can find here an overview of the "better" jQuery dropdown plugins, there must be one which suits your needs, for example this one.
The only way to do it would be to dynamically replace the select with a DHTML dropdown, the vanilla control doesn't have that capability. Using a DHTML dropdown has the benefit that it should degrade gracefully for those with javascript disabled.
You could do it quite simply with jQuery, have your normal <select>, grab it and replace with a hidden field, have your fancy DHTML dropdown with images (hidden positioned <div> with an unordered list could do it), attach to the onclick event of the items and make that update the hidden field with the selected value.