Change the value of input fields, according to what is selected from the Dropdown box

Question

I want my form input values to change automatically according to what is selected from the drop down box. So I basically have a form with three fields, and a <select> tag which has two <option> tags, all of this on the same page, so I want the values of those fields inside the form to update dynamically as different option is selected on the select box.

<select>
  <option>Cake</option>
  <option>Brownie</option>
</select>

<form>
  <input type="text" name="one"></input>
  <input type="text" name="two"></input>
  <input type="text" name="three"></input>
</form>

Basically all the textboxes shoul have the same words of selected option, for example if 'Cake' is selected I want all the textBoxes to display the word Cake, and then if 'Brownie' is selected then all the textBoxes to display Brownie and so forth. Thanks

Answer 1

Simple javascript solution for the html you've provided:

 var select = document.getElementsByTagName('select')[0]; select.addEventListener('change', function () { var texts = document.getElementsByTagName('input'); for (var i = 0; i < texts.length; i++) texts[i].value = select.value; }); 

 <select> <option>Cake</option> <option>Brownie</option> </select> <form> <input type="text" name="one"/> <input type="text" name="two"/> <input type="text" name="three"/> </form> 

Answer 2

Jquery Solution - Change :

<script>
 $(document).ready(function(){
   $("select#YourSelectId").change(function(){
      var b = $("select#YourSelectId :selected").text();
      $("input.TheInputsYouWantToChange").val(b);
   });
});
</script>