We Keep Coding

how to change class of dropdown when select an option dynamically

This is the code :
<select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)">
<option class="dd-select" value="SELECT">SELECT</option>
<option class="dd-ok" value="OK">OK</option>
<option class="dd-notok" value="NOT OK">NOT OK</option>
</select>
onchange="colourFunction(this)" sets a class to dropdown of selected option, it works when I select an option of dropdown, but when I set the option dynamically, it does not call onchange so option class does not set to dropdown... some one help...

When you change the value of the select, also trigger change() by yourself.
function colourFunction(ele){
console.log(ele.value)
}
$('#UM_Status_Engraving').val('OK').trigger('change')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)">
<option class="dd-select" value="SELECT">SELECT</option>
<option class="dd-ok" value="OK">OK</option>
<option class="dd-notok" value="NOT OK">NOT OK</option>
</select>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.

Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});

$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

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>

I need to change link in HTML when an option on select, selected

I have a select option with 4 languages, and I want when I choose a language to link it to it's HTML.
<select>
<option value="Hebrew">עברית</option>
<option value="English">English</option>
<option value="Arabic ">العربية</option>
<option value="Russian">русский</option>
</select>
And then change
<div class="selected selected-tab-2-color mobile">
<a href="tab2.html">
<span>עסקים ומוסדות</span>
</a>
<div class="show-triangle triangle-color-2"></div>
</div>
To <a href="left-to-right/tab2.html">

You can use onchange event in the select box.
Try this code:
<SELECT onchange="window.location.href=this.options [this.selectedIndex].value">
<option value="Hebrew.html">עברית</option>
<option value="English.html">English</option>
<option value="Arabic.html">العربية</option>
<option value="Russian.html">русский</option>
</SELECT>
For example, consider a website: http://www.example.com/.
If the user changes the select box to English, then the browser will be redirected to http://www.example.com/English.html.

$('select').on('change', function(){
var langVal = $(this).val();
$('.mobile a span').text(langVal);
});
Above solution will change the span text according to your select option

You can use onChange for your solution.
<select onChange="window.location.href=this.value">
<option value="www.google.de">Google</option>
<option value="www.yahoo.com">Yahooo</option>
<option value="left-to-right/tab2.html">עברית</option>
<option value="left-to-right/tab2.html">English</option>
<option value="left-to-right/tab2.html ">العربية</option>
<option value="left-to-right/tab2.htmlian">русский</option>
</select>

How can I move a select element's values & text to another select element

I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>

Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>

You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>