If the option is selected, fills in the input-CodePudding

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  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?

CodePudding user response：

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  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>