I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to remove the class. Can someone assist me with this?
Html
<select class="input" name="month" class="style4">
<option> Product </option>
<option> Product1 </option>
<option> Product2 </option>
<option> Product3 </option>
<option> Product4 </option>
</select>
<input type="text" name="No_Inst" id="No_Inst" >
Css
.input {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
border: 1px solid #999;
border-radius: 5px;
padding: 10px 12px;
background: #fff;
font-size: 14px;
color: #000;
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
outline: none;
margin-bottom: 25px
}
js
$(document).ready(function(){
$('.style4').change(function(){
var a = $(this).val();
if(a == 'Product'){
$('#No_Inst').val('')
}
if(a == 'Product1'){
$('#No_Inst').val(50)
}
if(a == 'Product2'){
$('#No_Inst').val(100)
}
});
});