Not able to get selected Dropdown list values on server side using PageMethods

Question

I binded the drop down list using PageMethods.

function BindDist() {
            var RegID = $("#ContentPlaceHolder1_ddlRegionalD option:selected").val();
            PageMethods.BindDistricts(RegID, OnSuccess);
        }

        function OnSuccess(result) {
            $("select[id$=ContentPlaceHolder1_ddlDistrictD] > option").remove();
            for (var i = 0; i < result.length; i++) {
                var option = document.createElement('option');
                option.value = result[i].DistrictId;
                option.textContent = result[i].DistrictNum;
                document.getElementById('ContentPlaceHolder1_ddlDistrictD').options.add(option);
            }
        }

After selecting drop down list, not able to get the selected item value, but able to see those values in UI of my page.

Please help me...!

Answer 1

That's because your adding items at client-side and in server-side the drop-down is empty. You can have a hidden input:

<input type="hidden" id="selectedValue" runat="server" />

And change its value when the value of the drop-down changes:

$('#MyDropdown').change(function () {
    $('#selectedValue').val($(this).val());
}

At the server you read the value of your hidden input.

Answer 2

I have got two Questions for you ...

1. Why are you binding the dropdown down in the way you have posted the code?

2. On what event you are not getting the selected value of dropdown?