Is it possible to somehow combine two <select> tags into one dropdown, preferably in a way which works fine with Bootstrap or the Chosen.js plugins?
I have clients and client groups. In the form I want them to be combined in one dropdown. It should look like "Multiple Select with Groups" in ChosenJS when you use <optgroup> tag.
The problem is that I want different post parameters depending on whether user has selected single client (I need to receive client_id) or client group (I need to receive client_group_id)
So a in trivial case I would make two <select> tags with different name attributes, which are mutually exclusive. But it would look much better if they're combined in one dropdown.
The best thing I can think of is to use <optgroup>, then in each <option> to put something like a data-type attribute, then when user selects something I'll manually fill some hidden input type. Seems okay, but maybe there is a better solution?
Related
Is there any way to share <option> tags between different <select> tags?
I have many selects, and all of them have the same exact options.
Since I don't want to populate the DOM with too many duplicates, I changed to using an input with a single datalist to share the options, however this both has issues with events (only fires a change event when unfocused, or the client presses enter), and also allows the client to write anything he wants, which really doesn't suit my case.
I don't think you can do that with straight HTML.
You can use JavaScript to populate all your SELECT tags. The OPTION tags will still appear several times in the DOM, but at least you don't be downloading them from the server.
An old question, but still worth a reply. In my case, I had a table of potentially hundreds of rows of data, with a select element with potentially hundreds of options. Page load times became too long.
My solution was to create 1 select element which is placed over the relevant element when that element gains focus, and focus is then moved to the select element. Result is that the memory footprint is reduced to only one instance of the selection, and only one iteration to populate it. Downside is two user interactions are required to expand the select, one to focus, and another to expand. How to automatically expand html select element in javascript link to ExpandSelect is now defunct. You can find it here https://gist.github.com/adamcoulombe/5390270 but it does seem quite verbose.
As said by zmbq, there doesn't seem to be a way to reuse <option> DOM element inside multiple <select> DOM element.
But you can lighten your DOM, by charging <option> element on the fly when <select> is opened. You can certainly do it manually, but there is also existing js library doing the job, as select2.
I have seen a lot of survey web-pages (among others) that uses checkboxes (multi-selection) as radios (one selection only). The reason they do so is that in their code they have a variable that decides how many selections in one question that can be made. If this is set to 1, it simply limits it to 1 selection instead of using the radio input. I can see the reason for this code-wise. But whenever I see a checkbox I immediately think that I can pick more than one option, however I can not.
Basically my question is:
Shouldn't you, when creating a survey where you use checkboxes to limit the maximum number of pickable options use radios when only one option is pickable?
Yes, you should. But that won't be enough characters to answer the question.
Is there any way to make select, which allows multiple selections look like ordinary?
Like a drop-down, you know…
<select multiple="multiple"></select>
look like
<select></select>
http://jsfiddle.net/UKf5Y/3/
Well, no. If there were, how would the user use it to select multiple items?
The only way that a multiple selection works is because all of the items are displayed at the same time and they can click-and-drag or click while holding down a modifier key.
If it looked like a drop-down box, how would you navigate to a second item without deselecting the first?
The styling of a select list, as well as many different elements in HTML (notably the input[type='file'] element, is really dependent on the browser. If you're looking to make it visually more appealing / different, you'll really need to use some JavaScript and use an "interface" to your select. Some really nice JavaScript libraries for select lists are jQuery Multiselect, jQuery UI Multiselect and select2, maybe you should look at those.
It's worth noting however that only select2 supports the single/multiple variants, and the styles still do look different, but how else would you be able to see multiple selections at one time? You could design your own solution which did look identical, but I think more than anything this would be misleading.
I would like implement a sort of choice using only Html and Css. I need to obtain a field where my user makes a choise and the latter leads to different forms. Precisely if my user decides to change his password will appear two input fields, or if he decides to change his information about his place of residence will appear four input field. Is possible this by using only Html and Css?
Sounds like you need to use a javascript library to do this bud. Don't think you can trigger this with just html and css. Though i may be wrong.
The client is looking for a control on the page which resembles and behaves like a dropdown select box, but that you can type into.
The page is initially going to load with thousands of items in a dropdown select box. Rather than display all the results, they want to type part of the word they're looking for into the textbox and to filter the result set.
The client specifically stated that they want to have a select box that can accept text. Does such a control exist? Is it something I'm going to have to hack together myself? Can somebody suggest how best to solve this problem?
As mentioned in the comments by dudeNumber4, there is no way to do this with just HTML. The best way would be to use jQueryUI autocomplete