We Keep Coding

How to make an HTML attribute change depending on which option is selected

I am trying to make a button change when a certain option from a drop-down is selected.
document.getElementById("region").onchange = function() {
document.getElementById("order-btn").product-code = this.value;
}
<select name="option" id="option" required>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>
What I need to happen is when an option is chosen from the drop-down, the product code associated with that option is put into the product-code="HERE" on the button.
For example, If I chose Option 2 on the drop-down, its product code "amdk19" would then be put into the button like this:
<button id="order-btn" type="sumbit" product-code="amdk19">
I think this can be done with JavaScript, but I could not figure out how.
Thanks

Something like this should work! You can't set attributes on the object directly, like you tried -- instead, you have to use setAttribute on the button. You can use .value on the dropdown to get the value of the selected option.
document.getElementById("option").onchange = function() {
const btn = document.getElementById("order-btn");
// `this` refers to the dropdown, so you're getting the dropdown's selected value
btn.setAttribute("product-code", this.value);
}
document.getElementById("order-btn").onclick = function() {
// `this` refers to the button
console.log(this.getAttribute("product-code"));
}
<select name="option" id="option" required>
<option selected disabled>Select An Option</option>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>

As there are already answer to this. I would like to recommend you Jquery for easy dealing with javascript.
Include jquery cdn like this : Adding jquery CDN in HTML
Add id to your select and button. Adding Id in HTML
Then use jquery methods like this:
$("#optionsOfSomething").on("change",function(e){
$("#order-btn").attr("product-code",$(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="option" id="optionsOfSomething" required>
<option value="1234d1">Option 1</option>
<option value="amdk19">Option 2</option>
<option value="akd1sk">Option 3</option>
<option value="19sd91">Option 4</option>
<option value="asjd91">Option 5</option>
<option value="129e8j">Option 6</option>
</select>
<div class="btn-checkout">
<button id="order-btn" type="submit" product-code="">Checkout</button>
</div>

Get the value of Select dropdown list when the value sent by the form and that appearing in the dropdown list are different

I have a form which has the following Select dropdown list.
<select name="some_options" id="some_options">
#foreach(options as option)
<option value="{{$option->id}}">{{$option->value}}</option>
#endforeach
</select>
Here , the data are being sent from the database via the Controller
The Select data look like this
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
Now, I have another disabled field which should get the value once the user changes the select option
<div>
<input type="text" id="some_options_cng" disabled>
</div>
My Javascript code
var opt = $('#some_options').val();
$('#some_options').on('change',function(){
opt = $('#some_options').val();
$('#some_options_cng').val(opt);
});
Now, the value in the <disabled> input field shows as
opt001 or opt002 and so on.
I want to show values as
Value 1 or Value 2.
How do I do it?

This code will work.
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text(); //This line of code is
//important
$('#some_options_cng').val(opt);
})
$(document).ready(function(){
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text();
$('#some_options_cng').val(opt);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
<div style="height:5px;"></div>
<div>
<input type="text" id="some_options_cng" disabled>
</div>

How to select dropdown option with javascript and change his value

I've got a dropdown and I need to put values in there that need to be escaped with javascript.
The reason why I want to use javascript is because the api I query is working with javascript and don't receive the other ways to escape quotes.
Exemple of dropdown value : "ToxKeywords:"genotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus""
So i got this dropdown :
<form method="post" name="query">
<label for="textQuery">Choose Query from list</label>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
<option value="Query1">Query 1</option>
<option value=ToxKeywords:systemic toxicity>Query 2</option>
<option value=ToxKeywords:"phototoxicity">Query 3</option>
<option value=ToxKeywords:"llna">Query 4</option>
</select>
And i want to replace for exemple value="Query1" with javascript.
I tried this :
<script>
document.getElementById("textQuery").selectedindex = "Query 1"
select.option.value = "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\"";
</script>
Apparently i can select the right value but i don't know how to change it to : "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\""
Can you help me to find the right Javascript syntax ?

You can use: document.querySelector(selectors);:
document.querySelector('#textQuery option[value="Query1"]').value =
'http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q=Tox‌​Keywords:%22genotoxi‌​city%22%20AND%20ToxK‌​eywords:%22ames%22%2‌​0OR%20ToxKeywords:%2‌​2micronucleus%22&wt=‌​json and i got : http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q‌​=ToxKeywords:"g‌​enotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus"&rows=10&wt=json';
document.getElementById('textQuery').addEventListener('change', function(e) {
console.log(this.value);
})
<form method="post" name="query">
<label for="textQuery">Choose Query from list</label>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
<option value="Query1">Query 1</option>
<option value=ToxKeywords:systemic toxicity>Query 2</option>
<option value=ToxKeywords:"phototoxicity">Query 3</option>
<option value=ToxKeywords:"llna">Query 4</option>
</select>
</form>

update list of <select> from another <select multiple> using jquery

I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>

I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>

Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>

If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.

Click on option event

how do I handle events for option elements?
<select>
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
When an option element is clicked I want to display a little description for the element. Any ideas how to do that?

You're going to want to use jQuery's change event. I am displaying the text of your option as an alert, but you can display whatever you want based on your needs. (You can also, obviously, put it inside another part of the page...it doesn't need to be an alert.)
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
Also, note, that I added an ID to your select tag so that you can more easily handle events to it (I called it myOptions).
Example: http://jsfiddle.net/S9WQv/

As specified by JasCav using jQuery you can accomplish the same in javascript using
<select onchange="alert(this.options[this.selectedIndex].text);">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
Alternatively, onclick event of option, but note that it is not compatible on all browsers.
<select>
<option value='option1' onclick="alert(this.value);" >Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>

You can write it as below mention using javascript.
document.getElementById("select").addEventListener('change', (event) => {
console.log(event.target.value)
});
<select id="select">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>