Develop Reference

If the option is selected, fills in the input

How, using only HTML and CSS, to make it so that when I select an option in <select>, my input is filled in?
Here is my code
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1">Default1</option>
<option value="Default2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
So, if I select Default1 option, in input will fill a text, for example "example1". Just to make text in input different from the option value
How can I do it in JS?

window.onload = function(){
document.getElementById("descrizione_01").value = document.getElementById("cod_art_01").options[0].dataset.text;
};
document.getElementById("cod_art_01").addEventListener("change", function(e){
document.getElementById("descrizione_01").value = e.target.options[e.target.selectedIndex].dataset.text;
});
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1" data-text="Example1">Default1</option>
<option value="Default2" data-text="Example2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>

set the value of select option dynamically

This is my code. I am trying to set the value of select tag from database. but it's not working as expected. My requiremnet is value='Auto' then 0th index should be selected else 1sst index should be selected. But its not happening that way. can some one help me?
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" name="avupdatemode" value="<%= data.updatemode %>" >
<option value="Auto" >Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>
<script>
var sel= document.getElementById('avupdatemode');
if(document.getElementById('avupdatemode').value =='Auto'){
sel.options.selectedIndex = 0;}
else{
sel.options.selectedIndex = 1;
}
</script>

First there is no id attribute on your select.
Second .value will take the value from the selected option and not the value attribute from the select.
So i've added data-value="sAuto" to the select and then done document.getElementById('avupdatemode').dataset.value == 'Auto'
DEMO
var sel = document.getElementById('avupdatemode');
if (document.getElementById('avupdatemode').dataset.value == 'Auto') {
sel.options.selectedIndex = 0;
} else {
sel.options.selectedIndex = 1;
}
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" id="avupdatemode" name="avupdatemode" data-value="sAuto">
<option value="Auto">Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>

I am getting my backend data in an array to my ejs page.
So I tried this and it worked:
var sos = <%- JSON.stringify(sos) %>;
I iterated the array and based on the value i set my index for the select option.

How to send a value from a select to an input text in html using javascript?

I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.

<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz

You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>

one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.

You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.

what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}

create object from multiple selection option list and input

On click, user can dynamically add combo (select option + input field) into form with (city code and telephone number), need to retrieve in a object with the inputed values for these fields.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {
return {
'telefone': input.value
};
});
console.log(telefoneNumber);
<div id="phone">
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>
The above code retreive the input telefone:values in object.
I need to loop throw the select options to get its values and add to the object as show below:
Element name can be used as property name for both telefone and city_code.
telephoneList: [
{
"telefone":555-222555,
**"city_code":1**
},
{
"telefone":555-666555,
**"city_code":2**
}
]

You can use the attribute previousElementSibling for getting the previous element which is a select.
This is assuming that the previous element is always the select element.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
var object = {
'telefone': input.value,
'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
}
return object;
});
console.log(telefoneNumber);
<div id="phone"> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input2" value="555-666555"> </div>

Select box not returning expected value

I have a form that will display different options depending on the first select box.
If option 1 is selected then a second dropdown will be shown with an option pre selected. If option 2 is selected then a different dropdown with two options will be shown.
The two new dropdowns will have the same ID and name for passing the option through to the backend but it keeps returning wrong values. Here is a
jsbin
<p class="input_title">I will use:</p>
<select name="js-rp-use" class="signup-select js-rp-use" id="rp-use" class="signup-select">
<option value="">Select Plan</option>
<option value="SOLO">Manage my own items</option>
<option value="OTHER">Manage others items</option>
</select>
<div class="js-rentpro-plan-solo">
<p class="input_title">System Plan:</p>
<select name="plan_id" id="plan_id" class="signup-select">
<option value="-1">Select plan</option>
<option value="1" selected>Plan Solo</option>
</select>
</div>
<div class="js-rentpro-plan-other">
<p class="input_title">System Plan:</p>
<select name="plan_id" id="plan_id" class="signup-select">
<option value="-1">Select plan</option>
<option value="2">Plan Business</option>
<option value="3">Plan Max</option>
</select>
</div>
<br><br><br>
<button type="button" id="submit">Submit</button>
// jquery
$("div[class^='js-rentpro-plan-']").hide();
$('.js-rp-use').change(function(){
$('#js-rp-plan-text, .js-rentpro-plan-solo, .js-rentpro-plan-other').hide();
if( $(this).val() == 'SOLO' ){
$('.js-rentpro-plan-solo').show();
} else if( $(this).val() == 'OTHER' ){
$('.js-rentpro-plan-other').show();
} else {
$('#js-rp-plan-text').show();
}
});
$('#submit').click(function(){
console.log( 'plan id is: ' + $('#plan_id').val() );
});

ID's must be unique. Instead of using the same id, use class.
The reason for you getting the wrong value is you're using $('#plan_id').val() It will return the value for the first match it finds.
EDIT:
To get the correct value with the current structure you can use:
var vl = $(this).siblings('div:visible').find('select').val()
console.log('plan id is: ' + vl );
But I suggest you modify the structure, wrap them in a form, give your select containers same class, so you'll have access to them more easily.
jsfiddle DEMO
your selector will always use the first match, regardless of you using element, class or id. Or using the class you can:
$('.signup-select:visible').val()