How to put the onchange event of a select list?

Question

I am ready with my next problem. I have a select list which is populated as follows:

<select id= "tables" name= "tables">
    <option value="select">-- Select --</option>
    <option value = student> Student</option>
    <option value = teachers > Teachers </option>
    //etc..
</select>

On the onchange event of the select list another select list is populated.

My first problem is when I select an item, say "Student", the view still remains on the "Select" option.I want that it should show the item I select.

My second query is, if I do not write "-- Select --" and "Student is the first item" then when I click Student for the first time nothing happens means the 2nd selct list doesnot get populated.

Please help!

Answer 1

assuming your html is like that :

<select id= "tables" name= "tables">
    <option value="">-- Select --</option><!-- setting the value to none -->
    <option value = student> Student</option> 
    <option value = teachers > Teachers </option>
</select>

With jQuery, it'll be the change event :

$('#tables').on('change', function(e) {
    var value = $(this).val();

    if(value.length != 0) {
        alert(value);
    }

});

See a live example there.

Answer 2

On change event

$('#tables').change(function(){
    alert('change: ' + $(this).val())
})

Demo: Fiddle

Answer 3

IS this what you want, FIDDLE

HTML CODE

<select id= "tables" name= "tables">
    <option value="">-- Select --</option><!-- setting the value to none -->
    <option value = "student"> Student</option>
    <option value =" teachers" > Teachers </option>
</select>

<select id= "tables2" name= "tables">
    <option value="">-- Select --</option>
    <option value = student> Student</option>
    <option value = teachers > Teachers </option>
    //etc..
</select>

JAVASCRIPT CODE

$(function(){
    $('#tables').on('change', function(e) {
        $('#tables2').val(this.value);
    });
})

Answer 4

Hope this will help:

   $('#tables').change(function(){
     var selectedVal = $(this).val();
     alert(selectedVal);
   })