I am looking for a way to show all the selected options of an opt-group. as example:
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
This os my current optgroup and I want something like this: image
I am looking for a way of achieving the image with jquery or javascript at all. I have no clue how to get multiple values of the dropdown displayed at top.
I found a solution (maybe someone else needs something like this)...I used the following library: http://wenzhixin.net.cn/p/multiple-select/docs/
it was exactly what I were looking for.
Related
I am select using select2-multiple function, and here is my code
<select data-placeholder="Choose Colors" class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Orange">Orange</option>
</select>
I want the user can add Orange value multiple times if he wants. By default select2 multiple didnot accepts duplicate value. Can someone here please help
You can select both if you hold the shift key by clicking on the option.
Maybe you should do Orange-1 and Orange-2 as Value. So if you want to submit it in a form you have two different GET or POST parameter.
Check this example: https://www.w3schools.com/tags/att_select_multiple.asp
<select data-placeholder="Choose Colors" class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange-1">Orange</option>
<option value="Orange-2">Orange</option>
</select>
I have implemented the following multiselect into my project.
http://loudev.com/
And I have done everything as I should (as far as I know) the layout is looking as it should, the css and javascript is running but when i hover over an option, it isn't clickable, it treats it as a line of text, not a clickable object.
Here is the code for the select input and where it is initialised in javascript.
<select multiple="multiple" class="form-control" id="my-select" name="my-select[]">
<option value="elem_1">elem 1</option>
<option value="elem_2">elem 2</option>
<option value="elem_3">elem 3</option>
<option value="elem_4">elem 4</option>
<option value="elem_100">elem 100</option>
</select>
$('#my-select').multiSelect();
Situation:
I have an option list like
<select class="database-column-name" name="caseid">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
and by default there is no option selected, but when you select an option you can't go back to selecting none again! This messes up the user experience of my page because I need the user to be able to selected no option at all.
Question:
Is there a hack to get around this?
Is as simple as this
<select class="database-column-name" name="caseid">
<option value=" ">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
$("select.database-column-name option").prop("selected", false);
You could have a "clear selection" button or something fire this code.
The preceding answer is a really good choice. The only recommendation that I would add to it is to make the value for the first item a "0"(zero), which allows your post-processing code to look for a specific value to ensure "no selection". Granted, you can look for " ", but that's easy to confuse with "".
<select class="database-column-name" name="caseid">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
If you want to have an actual blank show, rather than a phrase like "--Select--" then simply replace the "--Select--" text with a space.
<html>
<body>
<select class="database-column-name" name="caseid">
<option value="0"> </option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
The "value" portion is not displayed and is present to simplify code-based analysis of the selected option. In this case, a value of "0" would mean that no option has been selected.
I have a drop down list that when selected seems to revert to the default text, while the drop down works well and does what it is suppose to on the post back it as I said goes back to the default (sort by). I hope you awesome people could help me understand how I might be able to use Jquery to maintain the selected after a post back.
Here is the current code.
<select class="sorter" onchange="location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;">
<option value="">Sort by</option>
<option value="?orderby=0">Code</option>
<option value="?orderby=1">Title A-Z</option>
<option value="?orderby=2">Title Z-A</option>
<option value="?orderby=3">Manufacturer</option>
<option value="?orderby=4">Lowest price</option>
<option value="?orderby=5">Highest price</option>
<option value="?orderby=6">Lowest Quantity</option>
<option value="?orderby=7">Highest Quantity</option>
</select>
I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?
Feel free to use jQuery or raw javascript.
<select name="testSelect">
<optgroup label="fruits">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="cars">
<option value="ford">ford</option>
<option value="toyota">toyota</option>
<option value="ferrari">ferrari</option>
</optgroup>
</select>
You can do this using jQuery:
$('select').change(function() {
var selected = $(':selected', this);
alert(selected.closest('optgroup').attr('label'));
});
See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/
Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/
alert(selected.parent().attr('label'));
Well, in pure js:
this.options[this.selectedIndex].parentNode.label
Not a single function call and less code to boot. :-)