jquery script to retrieve select value on click: works in Firefox, does not in Internet Explorer

Question

hi

vatshal here; I am using a jquery script in which I am getting the current value of a select box on mouse click; it works on Mozila Firefox but doesn't work in Internet Explorer

onclick in IE shows previous value from the select box id

<select>
         <option>value1</option>
         <option>value2</option>
</select>

if we are clicking on value2 then jquery gets the value of the first element, but it is working on mozila firefox only; jquery code is given below:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function(){
    $("#multiple").click(function(){
        var a=$("#multiple").val();
        $("#to").val(a);
    });
});
</script>

Please help me

Answer 1

You should use the .change() instead of .click() event, and also use this to refer to itself inside the click handler, like this:

$(function(){
  $("#multiple").change(function(){
    var a = $(this).val();
    $("#to").val(a);
  });
});

If you want to update on both events, use .bind() like this:

  $("#multiple").bind('click change', function(){
    var a = $(this).val();
    $("#to").val(a);
  });