How to put an image/icon before select option text? - javascript

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.

Related

Select dropdown (option, select) css javascript

I'm currently trying to make a select dropdown (option, select) with a design like the following picture
enter image description here
When selected > 10 then the select dropdown option appears input text to fill in the desired amount.
Has anyone ever made something like this.
Thank you.
I think you'll just add an if statement for > 10 then the input display will change from none to whatever you want.
The kind of drop down list requested can not be constructed simply using a combination of HTML select and option elements. This is because the only permitted content type of Option elements is text, although HTML character entities may be used. (If you need to expand character references when setting an option element's content, use its innerHTML property instead of texContent.)
I would suggest searching for an already available HTML/JavaScript/CSS widget fulfilling a similar purpose, whether it be a self contained package or library plugin, before starting to write your own code from scratch.

how to create custom selection of div elements?

I want to make some divs which I can select.
JSFIDDLE
I also want to shift select the divs and multiple dives should only be selected if the user press crontroll (like in a normal windows explorer).
How can I do that?
A few years back I tried to make my own tree viewer that allowed fancy selecting features and expanding using divs and CSS. I found it much easier to use the select tag, with the size attribute so it wasn't a dropdown, the multiple attribute to give me fancy selecting abilities, and option groups to denote parent child relationships. Is that an option for you?
You can use jQuery UI library to achieve this quickly and efficiently. It works with CTRL key but not sure about SHIFT key.
Here's the link: http://jqueryui.com/selectable/

How to add and remove ng-bind from elements?

I am working on a Drag&Drop Dashboard, part of it is written with AngularJS.
I am using a select for my Dropdown-Menu:
<select ng-model="selected_option" ng-options="object.id for object in options"></select
When i select an option, i show a list of related elements:
<li ng-repeat="option in selected_option.columns"><div class="alert alert-success">{{option.header}}</div></li>
So, when i Drag&Drop the list-element to my "board" (inside given divs), and change the selected option again, all related elements are gone.
This is working as it should, of course.
But how to prevent the removing of my elements which are "draged" to
the board?
Summarize:
I have a list of elements via ng-repeat on the left.
I drag them to the right side (to my board). I wanted them to stay
there, even if i change the select.
If i drag them again to the list on the list, they should be gone
when i reselect the dropdown.
EDIT: A small JSFIDDLE
Or would it be nicer to do everything with jQuery? I love the 2-Way-Data-Manipulation from Angular, but if this ng-bind removing is too much work, i could also do it with jQuery.

Hide Options from Mutiple Select box using Javascript

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)

Style / Replace a select box using prototype / scriptactulous

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.

Categories