javascript - Unable to bind onChange event with select -

i trying bind on-change event html select , not successful in this, html code

<div class="size clearfix">   <form>     <label for="size"><spring:theme code="product.variants.size"/></label>     <select id="size">       <option>..</option>       <option>..</option>       <option>..</option>     </select>   </form> </div> 

and how, trying bind onchange event

$(document).ready(function ()     $("#size").change(function () {       var url = "";       var selectedindex = 0;       $("#size option:selected").each(function () {         url = $(this).attr('value');         selectedindex = $(this).attr("index");       });       if (selectedindex != 0) {         window.location.href=url;       }     }); }); 

but somehow not working, not sure doing wrong.just add code in $(document).ready(function () not working means, event not getting fired @ all

there no index attribute, should read selectedindex property of select element.

var selectedindex = this.selectedindex; 

also since don't have multiple select element, each call here redundant. this.value gives current select's value.

$("#size").change(function () {    if (this.selectedindex > 0) {       // assuming options have `value` attribute        window.location.href= this.value;     } }); 

for sake of completeness getting index of selected option in each callback use index method:

$(this).index(); 

since attr('index') returns undefined value condition falsy.