We Keep Coding

How to multiselect duplicate values using select2 library

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>

HTML/JS/CSS optgroup

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.

How do I make the "select one" option not go through when the user clicks submit on the select tag?

On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>

Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.

You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.

The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>

How do I add a blank <option> element to a <option> list?

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.

Select/disselect only a single option on click in a select (with the multiple attribute) form element

I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.