Hari Hari - 4 months ago 8
HTML Question

Text change on selection of dropdown not working

I have written a script where I need to change the label name based on selection from

dropdown
.

But problem is that the label is not showing up on selection of
dropdown
, I need some help.

Pardon me if I went wrong somewhere..Thank you.!

label.html

<div class="form-group">
<select id="json-one" class="form-control lable">
<option selected="" value="base">Please Select</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
</select>
</div>
<div class="form-group"><label id="labelChange"></label>
<input type="text" class="form-control" required="" name="lname" minlength="2">
</div>

//.js script

<script>
var newLabel = '';
$('.lable').on('change', function(){
$('#labelChange').text(newLabel); //Change the text before changing the value
switch(this.value){
case 'Doctor':
newLabel = 'Clinic name';
break;
case 'Lawyer':
newLabel = 'Practice address';
break;

}
}).trigger('change');
</script>

Answer

your problem is newLabel variable.

add $('#labelChange').text(newLabel); after switch case.

    var newLabel = '';
$('.lable').on('change', function(){
    switch(this.value){
        case 'Doctor':
            newLabel = 'Clinic name';
            break;
        case 'Lawyer':
            newLabel = 'Practice address';
            break;

    }
   $('#labelChange').text(newLabel); //Change the text before changing the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <select id="json-one" class="form-control lable">  
        <option selected="" value="base">Please Select</option>  
        <option value="Doctor">Doctor</option>  
        <option value="Lawyer">Lawyer</option>  
    </select>  
</div>
<div class="form-group"><label id="labelChange"></label>
    <input type="text" class="form-control" required="" name="lname" minlength="2">
</div>

Comments