Select dropdown (option, select) css javascript - 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.

Related

How to display as textbox by using select2?

Is there anyway using Select2 displaying as textbox instead of a select tool look?
According to the docs:
Select2 also supports multi-value select boxes. The select below is
declared with the multiple attribute. Select2 automatically picks up
on this:
<select multiple>...</select>
This is what gives the 'text box' look.
Or, if you are only after a single selection you could just change the CSS styles of the existing select tool to make it 'look' like a standard text box.
Steven, this is true, however, display is using tags and I guess we all want the input/box view.
Based on select2 v4.0.0, it seems we can choose his adapter (single or multiple), but I have been unable to force it (nor enter free entry !)

Can I use select2 purely as a tokenizer, disabling the dropdown/search/match functionality?

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.

Javascript displays more text boxes depending on a pull down option?

I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.

leave the <select> object expanded after selection

I am not sure if it is possible but I would like to leave the HTML <select> object expended using JavaScript, JQuery after the selection. Any ideas?
EDIT
What I want is that; if user selects more option from select list, I will append some more options to select element and leave it open. If user selects something other than more option, I will collapse the list. I can get a hold of other functionality but only problem here is to keep the select element open.
It's not possible directly. You'd have to implement something that looked and worked like a native <select> but which also had the feature you want.
edit — check Mr. Kling's answer; there might be a way to make that work, sort-of.
You could come very close with this:
$('#selectID').change(function(){
$(this).attr('size', $(this).children().length);
});
The size attribute specifies how many options to display (default is 0).
DEMO
You might have to make some tests whether this works in every (recent) browser. But imo this would be better than trying to simulate a select box (screen readers, etc).
You can not expand the select element with JavaScript. You can use select multiple, but that is probably not what you want.

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