I want to replace standard multiselect options ( which we have to keep pressed command button and then select multiple options ) with checkbox dropdown (that when i check the item, all the checked items are displayed in the header).
I have the following select options
<select multiple="" class="multimenu">
<option value="a">Playing</option>
<option value="b">Singing</option>
<option value="c">Listening</option>
<option value="d">Sleeping</option>
<option value="e">Chatting</option>
</select>
Now i want to replace the above such that there is a checkbox with each item.. and all the checked item(s), when checked, are displayed in the header.
I just want to transform the functionality, interface just same as normal single select select options but the only difference is, there is a checkbox infront of each item,, and when i tick the checkbox, each of the ticked item(s) is displayed in the header.
How can i attempt the same..??
If you want to handle your form data using a select box, but would prefer to display it to the user as a dropdown list with checkboxes for selecting each option, look no further than Dropdown Check List:
https://code.google.com/p/dropdown-check-list/
Related
Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>
You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');
while selecting a value through multi select in select2 value gets deleted from list and is shown in selected value . but if i clear value using
$("#mySel2").select2('data', null);
value gets cleared from selected option but it is not added back to dropdown list/original list of value.Though it works fine in case of single value selection.
Any pointer or direction will be of great help.
<select id="mySel2" multiple="multiple">
<option ng-repeat="option in options" value="{{option.id}}">{{option.name}}</option>
</select>
I have a simple HTML select with options. What I do is - set an option of that control as selected just after the page is loaded. My question is - how can I do that so the users won't see the first option of the select and will see the select with the value from the DB set. Here's the example:
<select id="simpleSelect">
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
</select>
Setting the value as follows:
$("#simpleSElect").val(2);
Now the users will see the select with selected option "One" and it will flash changing the option to "Two" once the jQuery code is executed. This flashing does not look good and I'm curious if there's a way to prevent this flashing and show the users the select with directly "Two" selected.
Thanks.
I want to make input option in select tag so user can choose between options or insert different value.
Is it possible?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
**<insert user value>**
</select>
HTML solution with "list" attribute:
<input type="text" name="city" list="citynames">
<datalist id="citynames">
<option value="Boston">
<option value="Cambridge">
</datalist>
You will have to use javascript to get the additional value. Check this post for some example code:
Jquery dynamically update "other" option in select
Select elements can't contain anything other than option or optgroup elements. Here's a ref to the spec http://www.w3.org/TR/html5/forms.html#the-select-element
You may be better off adding an option for "other" in your dropdown and then using JS to detect for that choice to dynamically show an input (below the dropdown) for a custom value.
Position an input box over the select box and remove the border of the input box. Make the length of the input box shorter than the select box so that the select box may still be used at its end.
Use the oninput event to detect input being entered in the input box. On each keystroke check for a continuing match in the select box. When a match no longer exists there is no further need for the select box.
The server will expect to receive both the text box input, if any, and the select box input, if any, and should use the select value if provided otherwise the input value if provided.
Is it possible to set the selected option of a form via a previous selected option in an other form?
The select option is like this, here 60x60 is selected.
<select id="pa_afmetingen-vierkant" name="attribute_pa_afmetingen-vierkant">
<option value="">Kies een optie…</option>
<option value="m001">40x40</option>
<option value="m002">50x50</option>
<option selected="selected" value="m003">60x60</option>
<option value="m004">70x70</option>
<option value="m005">80x80</option>
<option value="m006">100x100</option>
<option value="m007">125x125</option>
<option value="m008">150X150</option>
</select>
This form gets send to a new page, on this new page there is an exact duplicate of this form, I want this duplicate form to have the same option selected as was selected in the previous page.
My best bet would be to store the option in a variable , and via javascript select the option that matches the stored variable.
The form is submitted via POST
I don't really know what variable to use, nor how to target the option.
Solutions requiring Jquery are not a problem.
Kind regards,
There are a few ways of implementing it.
One solution could be that you get the selected option in JS and pass it to the url like http://www.myurl.com?selectedOption=3. Then at the other page you could get that selected and trigger a select to your menu to select that value.
Get Selected Option's value
var selectedOption = $('#pa_afmetingen-vierkant option:selected').attr('value');
Retrieve Selected Option's value from URL
Refere Here
Set Selected Option in the NEW select menu
$('#pa_afmetingen-vierkant-NEW option[value='+ selectedOption +']').prop('selected', true);
Another solution could be that you store temporary the selectedOption in the localStorage and then you delete it from there.