asked on

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?

Koma666

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

monarch_ilhan

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?

ajay1feb

ASKER

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#.

monarch_ilhan

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?

ajay1feb

ASKER

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.

monarch_ilhan

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

ajay1feb

ASKER

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.

ASKER CERTIFIED SOLUTION

monarch_ilhan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ajay1feb

ASKER

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.