Client Side Web Development

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

jimmy q — Mon, 12 May 2008 07:44:20 GMT

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.

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

blodfox777 — Mon, 12 May 2008 05:33:56 GMT

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>

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

vrparekh@gmail.com — Mon, 12 May 2008 05:04:45 GMT

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

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

blodfox777 — Mon, 12 May 2008 03:44:47 GMT

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

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

jimmy q — Sun, 11 May 2008 05:25:55 GMT

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

anand_vijayan — Fri, 09 May 2008 17:12:07 GMT

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

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

vrparekh@gmail.com — Fri, 09 May 2008 15:07:00 GMT

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