We Keep Coding

select multiple value from drop down list

How to select multiple value from drop down list?, when the value is selected it will no longer be available in the drop down menu.
[]
I want can be able to select multiple email addresses at once by pressing the add button where I want to show with a comma separator, so when we choose an email address through the drop down list it will automatically be displayed in the input field 'To' such as: neymar#gmail.com, ronaldo#gmail.com, messi#gmail.com then the user can also delete the last email in the input by pressing the delete button,

You must concat value of selectBox to previous value and replace it to your inputBox.
var prv_val,f_val;
$('#test').change(function() {
var new_val = $(this).val();
if(new_val != ""){
prv_val = $('#target_input').val();
if(prv_val != ""){
f_val = prv_val + "," + new_val;
}
else {
f_val = new_val;
}
$('#target_input').val(f_val);
}
});
#target_input {
display: block;
height: 30px;
margin-top: 20px;
width : 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='test'>
<option value=""></option>
<option value="one#gamil.com">one#gamil.com</option>
<option value="two#gamil.com">two#gamil.com</option>
<option value="three#gamil.com">three#gamil.com</option>
</select>
<input value="" id='target_input'>

For multiple selection create a list box if you are using asp.net control.
If you are using HTML add multiple attribute.
Follow this link
https://www.w3schools.com/TAGs/att_select_multiple.asp

Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.
Use multiple attribute inside your select tag.
<form action="/action_page.php">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>

Jquery toggle class on select when selecting the placeholder option

I am very new on JQuery, and despite my research and workarounds, i don't find out the right way to code what I want to achieve here.
So, here's the situation. I have a dropdown list like this:
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>
I want my dropdown list to be grey whenever the first placeholder "Your Country*" option is selected, and black when another option is selected.
select{
color: #000;
}
select.my-placeholder{
color: #666 !important;
}
I want to create a simple jquery block of code that adds the class .my-placeholder whenever the first option (with no value) is selected, and discard it whenever another option is selected. (I want no change in the HTML code)
How can I achieve that ?
Thank you

You can create a function which will respond to change event and selection check the value and add corresponding class
function updateColor() {
let getSelectedValue = $('select[name="your-country"]').val();
if (getSelectedValue === "") {
$('select[name="your-country"]').find('option').addClass('my-placeholder');
} else {
$('select[name="your-country"]').find('option').removeClass('my-placeholder').addClass('select');
}
}
.select {
color: red;
}
.my-placeholder {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="updateColor()">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>

Generate text on a webpage which depends on dropdown box options

I have created a dropdown box with 3 options on my website.
I want to change some text on the webpage, depending on the drop-down item selected. For example:
If dropdown option 1 is chosen, I would like some text on the page that says "You have chosen option 1".
I don't know any JavaScript and so I haven't tried anything apart from trying to search for a similar solution.
<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>

Full sultion with jQuery (I started typing it before you added the HTML to your question so the options are italian car brands).
https://jsfiddle.net/mL2c2xb6/
HTML:
<select id="carSelect">
<option></option>
<option value="Audi">Audi</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
</select>
<p id="choiceDisplay">
Selection Display
</p>
Javascript:
$('select').change(function(){ // Listen to changes to <select> element
const options = $("option"); // Get all the <option> elements.
let selectedOption = ""; // Var to store selected option value.
options.each(function(index){ // Iterate through option elements.
let option = options[index];
if($(option).prop("selected")) { // Find the seletced one.
selectedOption = $(option).val(); // Get the value and store it
};
});
$("#choiceDisplay")
.empty()
.append(selectedOption); // Display the result.
});

var e = document.querySelector('[name="os0"]');
var strUser = "";
e.addEventListener("change", function(){
strUser = e.options[e.selectedIndex].innerHTML;
alert("You have chosen " + strUser);
});

How to Set the Default Value of a Dropdown List with Javascript

<select class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork" onchange="getInstructions();" >
<option selected disabled value="">Select Fit To Work</option>
{{range $key, $val := .vm.FitToWorkArray}}
<option id="{{index $.vm.FitToWorkKey $key}}" value="{{$val}}" >{{$val}} </option>
{{end}}
</select>
This is my HTML code to fill a dropdown list using golang.
var fitToWorkName = vm.FitToWorkName
document.getElementById("TaskFitToWork").value = fitToWorkName;
This is the JavaScript code . Note, that here vm.FitToWorkName contains value to be filled in the drop down list. I tried to set the default fill for the dropdown list but it is not working. Please help me solve this issue.

One may set the default value of a dropdown list with either HTML or JavaScript, as this example illustrates. Initially, the code sets the default option using HTML and later at the user's discretion the default can be reset with JavaScript. At the outset the critical part of the code involves applying "selected" to the desired default option. If the user chooses a different option, then clicking the button that restores the default option activates some JavaScript. A simple, one-liner function uses the select element's selectedIndex property and sets it to indicate the second option. Since the array of options use zero-based indexing that index has a value of one.
var d = document;
d.g = d.getElementById;
var btn = d.g("btn");
var mySelect = d.g("mySelect");
function getInstructions(){
return true;
}
function restoreDefault(){
mySelect.selectedIndex = 1;
}
btn.onclick = restoreDefault;
option:first {
background: #fff;
color:#009;
}
select {
background:#fff;
color:#009;
}
<select id="mySelect" class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork" onchange="getInstructions();" value>
<option id="val" value="" disabled>Select Fit To Work</option>
<option id="val" value="somevalue" selected>Some Value </option>
<option id="val" value="anothervalue" >Another Value </option>
<option id="val" value="morevalue" >More Value </option>
</select>
<button id="btn">Restore Default</button>

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.

As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.

My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.