How to add onchange event on dropdown on page load as well as to perform ajax call on its onchange event

Question

Hi Guys,

I am using HTML and JQuery.

I have got below HTML for the dropdown.

<select onkeydown="if (!document.all) { window.setTimeout(function(e0) { return function() { if (document.forms.length &gt; 0) { document.forms[0].submit(); } } }(this),0) }" onchange="if (document.forms.length &gt; 0) document.forms[0].submit();" name="city" id="departure_city" class="formField">
<option value="">Choose your city</option>
<option selected="selected" value="556310">Caracas (CCS)</option>
<option value="556274">Da Nang (DAD)</option>
</select>    

On the above dropdown, first I want to remove all the attached event code, and will have fresh onChange() , onkey() events bind on page load and will perform ajax Call to the page /specialOffer.aspx with post data as departure_city=DAD as selected from the dropdown values.

Please suggest!

Thanks.

Best Regards, MKS

Answer 1

<select name="city" id="departure_city" class="formField">
    <option value="">Choose your city</option>
    <option selected="selected" value="556310">Caracas (CCS)</option>
    <option value="556274">Da Nang (DAD)</option>
</select>    

and in js:

$(function() {
    $('#departure_city').change(function() {
        $.ajax({
            url: '/specialOffer.aspx',
            data: { departure_city: $(this).val() },
            success: function(result) {
                // TODO:
            }
        });
    });
});