I have this drop down list:

<select name="group_psoft" id="group_psoft">
    <option value="0" selected="selected" title="0">---select---</option>
    <option value="100" title="100">100</option>
    <option value="200" title="200">200</option>
    <option value="300" title="300">300</option>
</select>

and one input field:

<input id="name" value="">

How do I clear out the value of the "name" input when I change value in the dropdown list?

Kind regards

I have this drop down list:

<select name="group_psoft" id="group_psoft">
    <option value="0" selected="selected" title="0">---select---</option>
    <option value="100" title="100">100</option>
    <option value="200" title="200">200</option>
    <option value="300" title="300">300</option>
</select>

and one input field:

<input id="name" value="">

How do I clear out the value of the "name" input when I change value in the dropdown list?

Kind regards

• javascript
• jquery

• It's been a while since I used jQuery, you should be able to add an onChange handler to the select element. Then whenever it gets select, $('#name').val() to change the input value – Robbie Milejczak Commented Nov 9, 2017 at 15:06
• $('#group_psoft').change(function() {$('#name').val('')}); – Daniel Beck Commented Nov 9, 2017 at 15:07

3 Answers 3

Simply use change() function in jquery which triggers when you change the select like this

Read Here about .change()

$('#group_psoft').change(function() {$('#name').val('')}); 

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">

You just need to use the change event of the list and then update the input on each occurrence of change.

$('#group_psoft').change(function() {
  // Set the input's value to the current value of the list
  $('#name').val(this.value);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">

This will clear the input field when the dropdown selection changes:

$("#group_psoft").on("change", function(){
  $("#name").val("");
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>

<input id="name" value="">