Bind countries information using javascript

Question

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

Vishal Yelve · Answer

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 $(function () { $.ajax({ type: POST url: Default.aspx/GetCompany data: '{}' contentType: application/json; charset=utf-8 dataType: json success: function (r) { var ddlCountries = $([id*=ddlCountries]); ddlCountries.empty().append(' Please select '); $.each(r.d function () { ddlCountries.append($( ).val(this['Value']).html(this['Text'])); }); } }); });

Amit Mohanty · Answer

Try this: $(document).ready(function() { // Add Select as the first option $(#ddlCountries).append(' Select '); // 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 ' + country.countryName + ' '); } } error: function(xhr status error) { // Handle error console.log(Error:  + error); } }); });

Naimish Makwana · Answer

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();

avair · Answer

It as to be achieved only through javascript

avair · Answer

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 indiaUS ...... 4 times3 times it should get bound only once to the dropdown

Vishal Yelve · Answer

Hi Avair do refer below link https://www.c-sharpcorner.com/blogs/bind-dropdown-using-jquery-ajax

Rajkiran Swain · Answer

// 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