John John - 4 months ago 8
HTML Question

Dropdownlist on change do JQuery function

I have a simple jquery function that for some reason is not working and I don't see the issue, I just want to change an input text when the dropdownlist selected value changes, the code looks like this, please kindly follow this link:

plnkr
https://plnkr.co/edit/xojs3NbD1nkXZpii6twt?p=preview

Idea: when the dropdownlist is in blank the input text will be in black too, when dropdownlist has value selected then input will also has a value.

Thank you guys.

Answer

You are setting the value of input as html(). There's not html property for input text

$("#stateorprovince").val("NY ");

And you don't need $("#borough1 option:selected").val(); to get the selected value. You can do it like this $("#borough1).val() .

I've made few changes in your code. Check

$(function () {
$("#borough1").change(function () {
var borough = $(this).val();
if (borough == "") {
$("#stateorprovince").html("");
return false;
}
else {
$("#stateorprovince").val("NY " + $(this).find('option:selected').text());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<label>Borough</label>
<select id="borough1">
<option value=""></option>
<option value="2">Bronx</option>
<option value="3">Brooklyn</option>
<option value="1">Manhattan</option>
<option value="4">Queens</option>
<option value="5">Staten Island</option>
</select>
<td>
<label>State</label>
<input type="text" id="stateorprovince">
</td>
</tr>
  </table>