Home ›
ASP.NET Forums » General ASP.NET » Client Side Web Development » three consicutive dropdown,one depends on other, how to achive that using javascript

three consicutive dropdown,one depends on other, how to achive that using javascript

Last post 05-12-2008 3:44 AM by jimmy q. 6 replies.

Sort Posts:

  • three consicutive dropdown,one depends on other, how to achive that using javascript

    05-09-2008, 11:07 AM

    in our asp.net web application, in many pages required country,state and city (which stores in sql server database)

    for which i use 3 dropdown for each.

    now when i put these dropdown in 3 different update panel particular dropdown refresh .

    now i want when request come for particular web page, all the information (country,states,cities)  given to browser and in dropdown when i  select any country according to that state dropdown gets value,but through javascript only (even i dont want to use ajax)

    how can i achive this thing.

    thanks

    VISHAL PAREKH

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-09-2008, 1:12 PM

    The only way to do this is using Javascript arrays. I would not recommend it as all the data has to be downloaded to the client side when the page loads. Check these links out for some tips on how to do it

    http://www.justin-cook.com/wp/2006/04/21/dynamically-populating-select-menus-client-side-with-javascript/

    http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23301885.html

    A better way to do it would be to do a postback and populate the values on the server side.

    Anand Vijayan

     

    Anand Vijayan
    --------------------------------------------------
    If this is your answer please mark it as answered.

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-11-2008, 1:25 AM
    • Loading...
    • jimmy q
    • Joined on 11-02-2006, 5:01 AM
    • Australia
    • Posts 2,460
    • Moderator

    vrparekh@gmail.com:
    now i want when request come for particular web page, all the information (country,states,cities)  given to browser and in dropdown when i  select any country according to that state dropdown gets value,but through javascript only (even i dont want to use ajax)

     

    Is there any particular reason why you do not want to use AJAX? Dependant drop downs are the best reasons for using AJAX.

    There are even controls that have been developed just for this situation, the cascading drop down list from the AJAX tool kit.

     

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-11-2008, 11:44 PM

    jimmy q:

    vrparekh@gmail.com:
    now i want when request come for particular web page, all the information (country,states,cities)  given to browser and in dropdown when i  select any country according to that state dropdown gets value,but through javascript only (even i dont want to use ajax)

     

    Is there any particular reason why you do not want to use AJAX? Dependant drop downs are the best reasons for using AJAX.

    There are even controls that have been developed just for this situation, the cascading drop down list from the AJAX tool kit.

     

     

    agree, Pls. check the url bellow:

    http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

    hope this helps

     

    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-12-2008, 1:04 AM

     thanks for reply,

     i dont want that user, select the one item from first dropdown,he has to wait for other dropdown fill from the server side.

    that's why only

    thanks

    vishal parekh

    VISHAL PAREKH

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-12-2008, 1:33 AM
    Answer

    a pure javascript demo

    hope this helps

     

    <html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

</head>
<body> 

<script language="JavaScript">
<!--
var hw_selecttext ="China|china 1^china 2^china 3^china 4^china 5^china 6*USA|USA 1^USA 2^USA 3^USA 4^USA 5^USA 6^USA 7*Other|Other1^Other2^Other3^Other4^Other5^"

var TheSplit1 = "*"        //level 1
var TheSplit2 = "|"        //level 2
var TheSplit3 = "^"        //level 3
var TheSplit4 = "@"        //
var hwallselecttext = hw_selecttext
var hwdefault_value = "" 


document.write('<select name="hw_1" onChange = "hw_select()"></select> <select name="hw_2" onChange = "hw_select()"></select> <input class="input" size="15" type="input" value="'+hwdefault_value+'" name="hw">\n');
var hwallselecttextarr
hwallselecttextarr = hwallselecttext.split(TheSplit1)
hwArraylength = hwallselecttextarr.length
var hwwhere = new Array(hwArraylength);
hwwhere[0]= new hw_comefrom("please select@","please select@"); 

for (var hwl=0;hwl<hwArraylength;hwl++)
{
    eval(hwwhere[hwl+1] = new hw_comefrom(hwallselecttextarr[hwl].split(TheSplit2)[0],hwallselecttextarr[hwl].split(TheSplit2)[1]))
}
function hw_comefrom(hwSelect_s1,hwSelect_s2) { this.hwSelect_s1 = hwSelect_s1; this.hwSelect_s2 = hwSelect_s2; } 

function hw_select()
{
    with(document.all.hw_1)
    {
        var hwSelect_s12 = options[selectedIndex].value;
    }
    for(hwi = 0;hwi < hwwhere.length;hwi ++)
    {
        if (hwwhere[hwi].hwSelect_s1.indexOf(TheSplit4)!=-1)
        {
            var hwThisV = hwwhere[hwi].hwSelect_s1.split(TheSplit4)[1]
        }
        else
        {
            var hwThisV = hwwhere[hwi].hwSelect_s1
        }
        if (hwThisV == hwSelect_s12)
        {
            hwSelect_s13 = (hwwhere[hwi].hwSelect_s2).split(TheSplit3);
            for(hwj = 0;hwj < hwSelect_s13.length;hwj++)
            {
                with(document.all.hw_2)
                {
                    length = hwSelect_s13.length;
                    if (hwSelect_s13[hwj].indexOf(TheSplit4)!=-1)
                    {
                        options[hwj].text = hwSelect_s13[hwj].split(TheSplit4)[0]
                        options[hwj].value = hwSelect_s13[hwj].split(TheSplit4)[1]
                    }
                    else
                    {
                        options[hwj].text = hwSelect_s13[hwj];
                        options[hwj].value = hwSelect_s13[hwj];
                    }
                    var hwSelect_s14=options[selectedIndex].value;
                }
            }
        break;
        }
    }
    document.all.hw.value=hwSelect_s12+""+hwSelect_s14;
}
function hw_init()
{
    with(document.all.hw_1)
    {
        length = hwwhere.length;
        var hwm = 0
        for(hwk=0;hwk<hwwhere.length;hwk++)
        {
            if (hwwhere[hwk].hwSelect_s1.indexOf(TheSplit4)!=-1)
            {
                options[hwk].text = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[0];
                options[hwk].value = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1];
                if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1])!=-1){hwm = hwk}
            }
            else
            {
                options[hwk].text = hwwhere[hwk].hwSelect_s1;
                options[hwk].value = hwwhere[hwk].hwSelect_s1;
                if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1)!=-1){hwm = hwk}
            }
        }
        selectedIndex = hwm
    }
    with(document.all.hw_2)
    {
        var hwn = 0
        hwSelect_s13 = (hwwhere[hwm].hwSelect_s2).split(TheSplit3);
        length = hwSelect_s13.length;
        for(hwl=0;hwl<length;hwl++)
        {
            if (hwSelect_s13[hwl].indexOf(TheSplit4)!=-1)
            {
                options[hwl].text = hwSelect_s13[hwl].split(TheSplit4)[0];
                options[hwl].value = hwSelect_s13[hwl].split(TheSplit4)[1];
                if (hwdefault_value.indexOf(hwSelect_s13[hwl].split(TheSplit4)[1])!=-1){hwn = hwl}
            }
            else
            {
                options[hwl].text = hwSelect_s13[hwl];
                options[hwl].value = hwSelect_s13[hwl];
                if (hwdefault_value.indexOf(hwSelect_s13[hwl])!=-1){hwn = hwl}
            }
        }
        selectedIndex = hwn
    }
}
hw_init();
//-->
</script> 

</body>
</html>
     
    Regards!
    Lance
    -- "Mark As Answer" If my reply helped you --

  • Re: three consicutive dropdown,one depends on other, how to achive that using javascript

    05-12-2008, 3:44 AM
    Answer
    • Loading...
    • jimmy q
    • Joined on 11-02-2006, 5:01 AM
    • Australia
    • Posts 2,460
    • Moderator

    vrparekh@gmail.com:
     i dont want that user, select the one item from first dropdown,he has to wait for other dropdown fill from the server side.
     

    The wait for the next drop down to load its values is really small that most users wont even be bothered. Here is a live demo of it in action

    http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

    However, if you want to do it in pure javascript, you certainly can, just you would have to load all the items before hand and write a fair bit of client side code. 
Page 1 of 1 (7 items)
RSS Available

Advertise on ASP.NET

About this Site