Stopping select.change from posting back

Question

Hi, this problem is part of a bigger page but I've simplified the code to provide an easy example of what I'm talking about. Basically I have an ASP dropdownlist with AutoPostBack="true" and I want to do some javascript client side which can stop the postback if necessary. However, I can't get it to stop the postback.

<script type="text/javascript">
$(document).ready(function()
{
    $("#ddl").bind('change', function() {
        return false;
    });
});
</script>

<select id="ddl" onchange="form.submit()">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
    <option value="">Item 4</option>
    <option value="">Item 5</option>
</select>

Answer 1

Try this:

$(document).ready(function() {
  $('#ddl').attr('onchange', '').change(function() {
    if (0 !== +$(this).attr('selectedIndex')) {
      this.form.submit();
    }
    return false;
  });
});

Answer 2

$("#ddl").change(function() {
    // Do some javascript
    return false;
});

Also, it might help if you take the onChange attribute off the select element

Answer 3

$("#ddl").change(function(e) {
    e.preventDefault();
});

Answer 4

This is my workaround (Firefox works, IE 7/8 works):

$(function() {
    var $select = $('#ddl'), tmp = $select.attr('onchange');

    $select.attr('onchange', '');

    $select.change(function() {
        // If you want to postback:
        tmp();
    });
});

Simple removes the HTML handler and puts it into a variable. Then you can register your change function and if you want to call the auto postback function you can.