We Keep Coding

How to copy and paste an html select selected value to other selects

I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?

See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!

You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>

Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp

Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.

Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);

See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.

<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>

Drop down selection using HTML/jQuery

I want to build a drop down menu that the second selection will be displayed if the first selection data belongs to a specific category.
As you can see below, the first selection will be about COUNTRIES. If the country selected has states, then a second drop down selection will be displayed, containing the states of that country.
1)Is there a tag (in my code "xyz") that i can use it to separate the countries in "state" and "no-state" categories? If there is, how can i read the value of the "xyz" tag?
2) If i use the:
<option class="no-state" value="Germany">Germany</option>
and then use the jQuery to read it it will give me the value GermanySpain (which is correct but not what i want)
$('.no-state').val();
HTML PART
<div id="country">
<select>
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
</div>
<div id="state" style="display:none" >
<select>
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
</div>
JQUERY PART
$(document).ready(function(){
$('#country').change(function() {
if (the value of "xyz" tag is === 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
What can i do to address this issue?
Thanks.

Added a variable to keep if a country has states or not according your custom attribute xyz
js
$(document).ready(function(){
$('#country').change(function() {
var hasStates = $(this).find("option:selected").attr("xyz");
if (hasStates == 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
fiddle

I think you can make use of .data() jQuery method, which reads the data-* a valid html5 attribute, but you have to change your markup to fix and use this script:
$('#country select').change(function() {
if ($(this).find('option:selected').data('xyz') === 'no-state') {
$('div#state').hide();
} else {
$('div#state').show();
}
});
You have to add a data-* prefix to get to it and make it a valid html5 attribute.
<select>
<option data-xyz="no-state" value="Germany">Germany</option>
<option data-xyz="state" value="USA">USA</option>
<option data-xyz="no-state" value="Spain">Spain</option>
</select>

Using the class attribute isn't that bad:
HTML
<select>
<option class="no-state" value="Germany">Germany</option>
<option class="state" value="USA">USA</option>
<option class="no-state" value="Spain">Spain</option>
</select>
JavaScript
$(document).ready(function(){
$('#country').change(function() {
var $sel = $(this).find("option:selected");
if ($sel.hasClass("no-state"))
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
Fiddle

First of all I would change your html structure to:
<select id="country">
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
<select id="state" style="display: none;">
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
Then you can simply do:
$("#country").change(function() {
var hasState = $(this).find(':selected').attr('xyz') === "state";
$("#state").toggle(hasState);
});
Here is a fiddle to see it in action.

Using the <select> tag from HTML with JavaScript

I'm working on using the select tag to know which attribute to assign a value.
<select>
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
How do I send the information to JavaScript to know which has been selected?
I've gotten it working with the help of Zero298, but thanks to everyone who is putting different ways to do this!

Start by giving your select an Id
<select id="mySelect">
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
Then in your script do the following:
var e = document.getElementById("mySelect");
var selectedValue = e.options[e.selectedIndex].value;
selectedValue will be the string that is in the value attribute of the selected option.

<select onchange="alert(this.options[this.selectedIndex].value)" >
JSFIDDLE

How to handle drop-down list's selected changing?

I have a little tag
<select name="txtTK" >
<option value="None">---</option>
<option value="Mat">Materials</option>
<option value="Cate">Category</option>
<option value="Cus">Customer</option>
<option value="Work">Work</option>
<Option value="Em">Employee</Option>
</select>
I want when i choose "Customer" option then the tag will show up the
the table of Custom. But the page does not reload.
I have no idea. Actually i tried w3c ajax but it seems not work with me.
Please give me an advice.
Thank in advance.

What your looking for is this change()
Heres an example you can try:
HTML:
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
jQuery:
$(document).ready(function(){
$(".target").change(function(){
alert("The value has been changed.");
});
});
So all we are doing here is checking if the value has changed for the element within the class .target. If the value has changed then it will run the function.

You can use jquery. Try like this.
<select name="select_user_type" id="select_user_type">
<option>Select User</option>
<option value="reg_farmar.php">Farmer</option>
<option value="reg_expart.php">Expert</option>
<option value="reg_supervisor.php">Supervisor</option>
<option value="reg_coordinator.php">Coordinator</option>
<option value="reg_officer.php">Officer</option>
<option value="reg_manager.php">Manager</option>
</select>
<script>
$('#select_user_type').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
var str = String($(this).val());
$('#div1').load(str);
})
.change();
</script>

Add value to a drop down menu with a form

Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.

Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>​​
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
​
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!

You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/