populating dropdown values

rupen · June 10th, 2005, 02:02 AM

Inside a form, I have a drop down menu list of manager names from Access database. When a user select a manager name from drop down list, that manager's team members should added into another drop down , How could I accomplish this without reloading the page because i don't want to loose all others "entered" data on this form.

mat41 · June 10th, 2005, 02:21 AM

-----------------------cut n paste start-----------------------
<html>
<HEAD>
  <title></title>
  <SCRIPT LANGUAGE="JavaScript">
    function move(fbox, tbox) {
    var arrFbox = new Array();
    var arrTbox = new Array();
    var arrLookup = new Array();
    var i;
    for (i = 0; i < tbox.options.length; i++) {
    arrLookup[tbox.options[i].text] = tbox.options[i].value;
    arrTbox[i] = tbox.options[i].text;
    }
    var fLength = 0;
    var tLength = arrTbox.length;
    for(i = 0; i < fbox.options.length; i++) {
    arrLookup[fbox.options[i].text] = fbox.options[i].value;
    if (fbox.options[i].selected && fbox.options[i].value != "") {
    arrTbox[tLength] = fbox.options[i].text;
    tLength++;
    }
    else {
    arrFbox[fLength] = fbox.options[i].text;
    fLength++;
       }
    }
    arrFbox.sort();
    arrTbox.sort();
    fbox.length = 0;
    tbox.length = 0;
    var c;
    for(c = 0; c < arrFbox.length; c++) {
    var no = new Option();
    no.value = arrLookup[arrFbox[c]];
    no.text = arrFbox[c];
    fbox[c] = no;
    }
    for(c = 0; c < arrTbox.length; c++) {
    var no = new Option();
    no.value = arrLookup[arrTbox[c]];
    no.text = arrTbox[c];
    tbox[c] = no;
       }
    }
  </script>
</HEAD>
<BODY>
<form name="combo_box">
<table>
<tr>
  <td><select name="list1" >
       <option value="1">All Blacks</option>
       <option value="2">Are the</option>
       <option value="3">Greatest</option>
       <option value="4">Rugby Team</option>
       <option value="5">In the world</option>
      </select></td>
  <td align="center" valign="middle"><input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<"><input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>"></td>
  <td><select size="3" name="list2" style="width:150"></select></td>
</tr>
</table>
</form>
</body>
</html>
-----------------------cut n paste finish-----------------------

Wind is your friend
Matt

arnabghosh · June 10th, 2005, 02:26 AM

Well Rupen,
You can use Javascript functions for populating one dropdown by selecting value from another dropdown. this function has to be attached to the onchange function of the master dropdown control like
<select "controlname" onchange="somefunction()">

step 1:
1st pick up the value of manager & teammemember values from the database using ASP.
step 2:
convert ASP variable values into Javascript variables
step 3:
write function in javascript using the length of the Manager dropdown control field to loop it through it using a for...loop. then populate the member control dropdown using new Option object.

This can be done very easily if you confident enough with array variables.

I hope though this may not look very clear but it works if you can follow the steps and are confident with Javascript.

in Javascript first

rupen · June 10th, 2005, 04:02 AM

Thanks for reply,

But for step 1, it is totally different seane,
teammambers name depends on manager say, manager1 will have membr1,membr2 while manager2 will have membr2,membr2 i.e. teammember's name depends on selection of manager's name, so i can't populate it in advance,

for step 2, how do i convert asp varible to javascript variable?

The problem here is access to database from javascript function.

i will be happy if you can provide some code.

rupen · July 20th, 2005, 10:51 AM

Hi Guys,

Can I have any update on above topic? It's burning my lots of calories...

Thanks in Advance.

Rupen Anjaria.
We CAN'T avoid problems, but of course can solve it.

vinod_yadav1919 · August 8th, 2005, 05:23 AM

Hii Rupen
Please visit this link ,It will help you :)
http://js-examples.com/javascript/?run=683

Cheers :)

vinod

rupen · August 8th, 2005, 09:05 AM

Hi Vinod,

Thanks for link. But this is done in js, i have done such thing in js, but the problem is that i have to copy all vaues from db to js array(even they have use same in this link.) but that comsumes lot resouce, instead all thing should be done in ASP.

like this:
http://www.tek-tips.com/faqs.cfm?fid=3978

The problem with above example is that i can't retain values.

Rupen Anjaria.
We CAN'T avoid problems, but can solve it.

vinod_yadav1919 · August 8th, 2005, 10:56 AM

Hii Rupen!!
Other alternative is to use hidden frames then populate the values of second dropdownlist form that frame.If you don't want to load all the data simulataneously.

Other alternative is ActiveX object, it works with IE

Cheers :)

vinod

rupen · August 8th, 2005, 11:04 AM

Hi Vinod,

Sorry to say, but I realy don't have any idea about these alternative, i be greatly thankfull to u if u can give any link explaing such solution.

Thank you so much.....

Rupen Anjaria.
We CAN'T avoid problems, but can solve it.

vinod_yadav1919 · August 9th, 2005, 06:13 AM

Hii Rupen !!
No probs
Hope this will help you

<script>
var req;
function blr()
{
 url="http://myurl_ip/vinodR&D/optionvalue.html"
    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
        alert("hii")
        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
           try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) {
            try {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                  req = false;
            }
        }
    }
    if(req) {
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send();
    }
}

function processReqChange()
{

    if (req.readyState == 4) {

        if (req.status == 200) {

                     var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");
                        xmlDOM.loadXML(req.ResponseText);

                        var oNode = xmlDOM.documentElement.firstChild;

                        var n=0;
                        selectedvalue=document.myform.myid.value
                        var outputstr
                        outputstr=""
                          if(oNode != null)
                          {

                                       while (oNode != null)
                                       {
                                         if(selectedvalue==n)
                                          {
                                           outputstr=oNode.text
                                           break;
                                           }
                                           oNode = oNode.nextSibling;
                                        n++;
                                       }

                            } var obj
                                                                            parentobj=document.getElementById("myselbox")

                                                                            objarr=outputstr.split("|")

                                                                            for(i=0;i<objarr.length;i++)
                                                                            {

                                                                            chld=objarr[i].split("~")
                                                                            myname=chld[0];
                                                                            myvalue=chld[1];
                                                                             obj=new Option(myname,myvalue)
                                                                            parentobj[i]=obj
                                                                            }
            }
    }
}
</script>
<body onload="blr()">

<form name="myform">

Select Your Choice<select id="myid" name="myid" onchange="blr()">
<option value="1">AllRecord With 1</option>
<option value="2">AllRecord With 2</option>
<option value="3">AllRecord With 3</option>
<option value="4">AllRecord With 4</option>
</select>
<br>
Dynamic Select Box<select id="myselbox" name="myselbox">
</select>

</form>

</body>

<response>
  <option1>Name1~1|Name2~2|Name3~3|Name4 ~4|Name5~5|Name6~6|Name7~7|Name8~8|Name9~9|Name10~ 10|Name11~11</option1>
  <option1>Vinod1~1|Vinod2~2|Vinod3~3|Vi nod4~4|Vinod5~5|Vinod6~6|Vinod7~7|Vinod8~8|Vinod9~ 9|Vinod10~10|Vinod11~11</option1>
  <option1>Rupen1~1|Rupen2~2|Rupen3~3|Ru pen4~4|Rupen5~5|Rupen6~6|Rupen7~7|Rupen8~8|Rupen9~ 9|Rupen10~10|Rupen11~11</option1>
  <option1>Hello1~1|Hello2~2|Hello3~3|He llo4~4|Hello5~5|Hello6~6|Hello7~7|Hello8~8|Hello9~ 9|Hello10~10|Hello11~11</option1>
  <option1>Vijay1~1|Vijay2~2|Vijay3~3|Vi jay4~4|Vijay5~5|Vijay6~6|Vijay7~7|Vijay8~8|Vijay9~ 9|Vijay10~10|Vijay11~11</option1>

</response>

**********optionvalue.html End **********

Note:-
1>Please change ur url as per ur requirement.
2>You can enhance ur code by getting only those rows for which u r selecting values
 I mean you can avoid to loop
 if(selectedvalue==n)
                                          {
                                           outputstr=oNode.text
                                           break;
                                           }
by making ensure that the row returned by ur optionvalue.html/asp/php/jsp whtever is returning is the ur option value.
Here i used all the combinations so that I donÃ³t have to write the asp code
2>Same techniq u can use with hidden frames :)

Cheers :)

vinod