Getting text from asp.net dropdownlist which is populated with jquery

Question

I populated asp.net dropdownlists with jquery to show countries and cities. The dropdownlists show the correct value. I need to get the text of a ddlState at the backend of asp.net. However, I cannot get the selected text from the dropdownlist. It said it is null.

Below is my script.

    <script type="text/javascript">
    $(document).ready(function () {
        GetCountries();
        GetStates();

    });
    function GetCountries() {
        $.ajax({
            type: "GET",
            url: "http://api.geonames.org/countryInfoJSON?formatted=true&lang=en&style=full&username=xxx",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            success: function (data) {
                $(".ddlCountry").append($('<option />', { value: -1, text: 'Select Country' }));
                $(data.geonames).each(function (index, item) {
                    $(".ddlCountry").append($('<option />', { value: item.geonameId, text: item.countryName}));
                });
            },
            error: function (data) {
                alert("Failed to get countries.");
            }
        });
    }

    function GetStates() {
        $(".ddlCountry").change(function () {
            GetChildren($(this).val(), "States", $(".ddlState"));
        });


    }


    function GetChildren(geoNameId, childType, ddlSelector) {
        $.ajax({
            type: "GET",
            url: "http://api.geonames.org/childrenJSON?geonameId=" + geoNameId + "&username=xxx",
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            success: function (data) {
                $(ddlSelector).empty();
                $(ddlSelector).append($('<option />', { value: -1, text: 'Select ' + childType }));
                $(data.geonames).each(function (index, item) {
                    $(ddlSelector).append($('<option />', { value: item.geonameId, text: item.name + "," + item.countryCode }));
                });
            },
            error: function (data) {
                alert("failed to get data");
            }
        });
    }
</script>

Below is the two dropdownlists that i have.

 <asp:DropDownList
                    runat="server"
                    ID="ddlCountry"
                    CssClass="ddlCountry">
                </asp:DropDownList>
                <br />
                <asp:DropDownList
                    runat="server"
                    ID="ddlState"
                    onChange="ddlState_OnChange"
                    CssClass="ddlState">
                </asp:DropDownList>

Can anybody help? Thank you.

I want to get the selected text after I click the submit button. I am getting the text with ddlState.SelectedItem.Text — kittyKat
– kittyKat, Commented Jan 8, 2019 at 10:33
Possible duplicate of asp dropdownlist dynamic value from javascript issue — H77
– H77, Commented Jan 8, 2019 at 12:36

CMartins · Accepted Answer · 2019-01-08 10:51:17Z

-1

your "change" function should not be inside the GetStates() function. You should collect the value every time the user change the select. and after that trigger the GetStates with the actual value.

$(".ddlCountry").change(function () {
         valueOfddlCountry = $(this).val();

});

answered Jan 8, 2019 at 10:51

CMartins

3,3235 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kittyKat Over a year ago

This is to get the list of states based on the country that i selected.

CMartins Over a year ago

Then, when someone change the value of the select you add the value to a variable and pass it to your function like functionName(passValue);

Collectives™ on Stack Overflow

Getting text from asp.net dropdownlist which is populated with jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related