Bind countries information using javascript

avair

I have a dropdown which will bind all the countries to it i need to add select and bind all the countries from database along with select as first value in dropdown. If you need StoreID its StoreID="stCountries"

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

avair3y ago
It as to be achieved only through javascript
+1

Vishal Yelve3y ago

Hi Avair,

try this,

In codebehind page

[WebMethod]
public static List GetCompany()
{
    string query = "SELECT CountryId, CountryName FROM Countries";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List countries = new List();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    countries.Add(new ListItem
                    {
                        Value = sdr["CountryId"].ToString(),
                        Text = sdr["CountryName"].ToString()
                    });
                }
            }
            con.Close();
            return countries;
        }
    }
}

Aspx.cs page

avair3y ago
I will have the data in this way in db

ID Countries States
1 India AP
2 India Telanagana
3 India UP
4 India MP
5 US Newyork
5 US Albama
5 US Texas

Instead of binding india,US, ...... 4 times,3 times it should get bound only once to the dropdown
+1

Amit Mohanty3y ago

Try this:

$(document).ready(function() {
    // Add "Select" as the first option
    $("#ddlCountries").append('');
    
    // Fetch the countries from the server
    $.ajax({
        url: "YourCountriesHandler", // Replace with the actual server-side script to fetch the countries
        type: "GET",
        dataType: "json",
        success: function(data) {
            // Bind the countries to the dropdown
            for (var i = 0; i < data.length; i++) {
                var country = data[i];
                $("#ddlCountries").append('');
            }
        },
        error: function(xhr, status, error) {
            // Handle error
            console.log("Error: " + error);
        }
    });
});

Naimish Makwana3y ago

Try below:

// Assuming you have a JavaScript function to fetch the countries from the server
function getCountries() {
    // Make an AJAX request to fetch the countries from the server
    // Example implementation using mock data
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const countries = [
                { CountryId: 1, CountryName: "Country 1" },
                { CountryId: 2, CountryName: "Country 2" },
                { CountryId: 3, CountryName: "Country 3" }
            ];
            resolve(countries);
        }, 1000);
    });
}

// Function to bind the countries to the dropdown
function bindCountries() {
    const ddlCountries = document.getElementById('ddlCountries');

    // Clear existing options
    ddlCountries.innerHTML = '';

    // Add the "Select" option as the first option
    const selectOption = document.createElement('option');
    selectOption.value = '';
    selectOption.text = 'Select';
    ddlCountries.appendChild(selectOption);

    // Fetch countries from the server
    getCountries()
        .then(countries => {
            // Iterate through the countries and add options to the dropdown
            countries.forEach(country => {
                const option = document.createElement('option');
                option.value = country.CountryId;
                option.text = country.CountryName;
                ddlCountries.appendChild(option);
            });
        })
        .catch(error => {
            console.log('Error fetching countries:', error);
        });
}

// Call the bindCountries function to populate the dropdown
bindCountries();

Vishal Yelve3y ago
Hi Avair,

do refer below link

https://www.c-sharpcorner.com/blogs/bind-dropdown-using-jquery-ajax
+1

Rajkiran Swain3y ago

// Assuming you have an array or object containing the list of countries
var countries = [
  { value: "", text: "Select" },
  { value: "1", text: "Country 1" },
  { value: "2", text: "Country 2" },
  // Add more countries here...
];

// Get the dropdown element by its ID
var ddlCountries = document.getElementById("ddlCountries");

// Clear existing options
ddlCountries.innerHTML = "";

// Loop through the countries and create option elements
for (var i = 0; i < countries.length; i++) {
  var option = document.createElement("option");
  option.value = countries[i].value;
  option.text = countries[i].text;
  ddlCountries.appendChild(option);
}