combo box (dropdownlist) with ajax

i have to change value of one combo box based on other combo box without refreshing page?lets we have two  combo box . one is named country which has list of countries of world and second combo box named cities which has  all cities of world.here i want that when i select country name in country combo box then based on selected country  value of city combo box should get populated.?for example : in one combo box there is three country india, usa,england .when page gets load both combo will be populated with their respective values . suppose here in second combo i have three city delhi, newyork,london.so when i select inida in country combo then delhi should get pouplated in combo without refreshing page?so how i can do it in update panel (using ajax)after receiving all value of combos from database?
ajay1febAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Koma666Commented:
you can do that with javascript.

delete a combobox item:
document.formname.selectname.options[index_of_the_node] = null;
e.g.
document.form1.countryselect.options[0] = null;

add a combobox item:
newentry = new Option(label, value, defaultSelected, selected);
document.formname.selectname.options[index] = newEntry;

e.g.
newentry = new Option("Label", "value", false, true);
document.myform.country.options[document.myform.country.length] = newEntry;

adds the entry to the end
0
monarch_ilhanCommented:
In cmbCountry_SelectedIndexChanged event, you will populate cmbCity items. But it seemed me to easy. I think your problem is different than this.
If you are useing AjaxUpdatePanel, you can do modifications on all controls inside that panel if an event of one of control (cmbCountry eg.) fired.

Doesnt this approach work?
0
ajay1febAuthor Commented:
see i have 2 combo in update panel?if i select country value of one combo on index changed event cities combo value should get change?kindly give me step by step code.including javascript and code behind in c#.
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

monarch_ilhanCommented:
Now,
You can use same eventhandler for both combobox changed event. And determine which combobox fired that event by using sender object of event.
DropDownList drp=(DropDownList)sender;
if(drp.ID=="cmbCountry")
//do staff for country changed event
else
//do staff for city changed event

Is it clear?
0
ajay1febAuthor Commented:
DropDownList drp=(DropDownList)sender;
if(drp.ID=="cmbCountry")
//do staff for country changed event
i want pass here id of country and get all cities in next combo box related with that country.
else
kindly tell me from where i will have to write code .i mean on aspx or code behind.i m using csharp.
0
monarch_ilhanCommented:
This works
//Code Behind. (cs file) In below, assume drop1 is country, drop2 is cities.
//On page load I fill drop1 with 3 country name.And set drop1 AutoPostback property to TRUE!! 
// in selectedchangedevent of drop1 i just clear drop2 items and add new items to it according to choice
 
 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            { 
                DropDownList1.Items.Add(new ListItem("USA"));
                DropDownList1.Items.Add(new ListItem("Turkey"));
                DropDownList1.Items.Add(new ListItem("England"));
            }
        }
 
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
 
                DropDownList2.Items.Clear();
                for (int i = 0; i < 10; i++)
                {
                    DropDownList2.Items.Add(new ListItem(DropDownList1.SelectedItem.Text + i.ToString()));
                }
 
        }
 
 
//aspx page update panel content code
asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                    Width="310px">
                </asp:DropDownList>
                <asp:DropDownList ID="DropDownList2" runat="server" Width="307px">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

Open in new window

0
ajay1febAuthor Commented:
see i m populating both combo cities and country from database.on first time page load first combo box will be enabled  that is country combo and seond one will be disabled.whenever user will be select values in country combo then second city combo will be enabled with matched value poulated with related country.like if in country combo user selects india then second city combo will be enabled and it will be show all india's city.like deli,mumbai so on.so my question is here in ur given code for second combo update that is city combo how it is istablishing relatonship with country and city.i mean how it is deciding which city is rleated with which country.kindly make it clear.and what is cascading dropdown?
Thanks in advance.
0
monarch_ilhanCommented:

        protected void Page_Load(object sender, EventArgs e)
        {
 
 
            if (!IsPostBack)
            {
                DropDownList2.Enabled = false;
                SqlConnection con = new SqlConnection("YourConnectionString");
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = "Select Country From Countries";
                cmd.Connection = con;
                SqlDataAdapter adapter = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                adapter.Fill(dt);
                DropDownList1.DataSource = dt;
                DropDownList1.DataBind();
            }
        }
 
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
 
            string country = DropDownList1.SelectedItem.Text;
            SqlConnection con = new SqlConnection("YourConnectionString");
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "Select City From Cities Where Country='" + country + "'";
            cmd.Connection = con;
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
 
                DropDownList2.Enabled = true;
                DropDownList2.DataSource = dt;
                DropDownList2.DataBind();
 
        }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ajay1febAuthor Commented:
if u have 5 or 6 controls on ur page and u want put only 2 or 3 control to put in update panel.then kindly desribe it how to make design of page.by the way ur solution was great.thanks a lot.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.