Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Making dynamically generated dropdown boxes consistent across browsers

Status
Not open for further replies.

BillLumbergh

Programmer
Aug 15, 2001
51
US
I'm trying to dynamically populate a second dropdown box based on the value selected in the first. I've got it to generate the values correctly; however, I am having trouble getting it to display the way I want. In Netscape 6 and IE 5, it displays the second dropdown just as I want it. However, in Netscape 4.7, it is doing the initial page load with nothing in the second dropdown, which is fine, however, it is setting the width of the dropdown to fit an empty list, so when the JavaScript function populates the list, the width of the dropdown box does not change and I cannot see the list that has been generated.

I used alot of the code from the following page, which does pretty much what I am looking to do:


I know it can work in Netscape 4.7 because that page works the way I want it to; I just can't figure out what it is I am doing wrong. I have looked back through all the posts and I can't find anything dealing with this issue. I'm not even sure if it is a JavaScript or HTML problem.

Below is a section from View Source; i.e., all ASP code has been parsed and this is the result. Any help would be appreciated.

Code:
<html>
<head>
<LINK REL=STYLESHEET TYPE=&quot;text/css&quot; HREF=&quot;../reportStyles.css&quot;>
<title>exportmember.asp</title>

<script language=&quot;JavaScript1.2&quot;>

function populateTerritory(f, option) {

        var terr = new Array(2);

        terr[0] = new Array(8);
        terr[1] = new Array(8);
        
        terr[0][0] = &quot;Eastern Territory&quot;;
        terr[1][0] = 1;
        
        terr[0][1] = &quot;MidAtlantic Territory&quot;;
        terr[1][1] = 1;
        
        terr[0][2] = &quot;MidWestern Territory&quot;;
        terr[1][2] = 1;

        terr[0][3] = &quot;MidAtlantic Territory&quot;;
        terr[1][3] = 2;
        
        terr[0][4] = &quot;MidWest Territory&quot;;
        terr[1][4] = 2;

        terr[0][5] = &quot;Northern Territory&quot;;
        terr[1][5] = 3;
        
        terr[0][6] = &quot;Southern Territory&quot;;
        terr[1][6] = 3;
        
        terr[0][7] = &quot;Western Territory&quot;;
        terr[1][7] = 3;

        var m = f.cmbTerrID;
        
        // remove all the existing options from the Territory ID combo box
        clearList(m);
        addElement(m, &quot;..select Territory..&quot;, &quot;&quot;);      
        
        // populate Territory ID combo box
        for (j = 0; j < 8; j++) {
                
                if (parseInt(terr[1][j]) == parseInt(option)) {
                        addElement(m, terr[0][j], terr[0][j]);
                }               
        }
        
        m.selectedIndex = 0;
}

function addElement(list, text_in, value_in) {
    var o = list.options;
    var nIdx;
    
    nIdx = o.length;
                
    o[nIdx] = new Option(text_in, value_in);
}

function clearList(list) {
    var i = 0;
    var o = list.options;

    for (i = o.length; i >= 0; --i)
                o = null;
}


</script>

</head>

<body onLoad=&quot;populateTerritory(document.forms[0],0)&quot;>
<form ACTION=&quot;exportmember.asp&quot; name=&quot;frmMExport&quot;>

<table border=&quot;0&quot; width=&quot;100%&quot;>

        
        <tr>
                <td align=&quot;right&quot; nowrap><strong>Network:</strong></td>
                <td align=&quot;left&quot;><SELECT name=&quot;cmbNetworkID&quot; onChange=&quot;populateTerritory(this.form, this.form.cmbNetworkID.options[this.form.cmbNetworkID.options.selectedIndex].value)&quot;>
                                                        <option value=&quot;&quot;>..select Network..</option>
                                                        <option value=2>Epic</option>
<option value=1>Servall</option>

                                                </SELECT>
                </td>
        </tr>
        
        <tr>
                <td align=&quot;right&quot; nowrap><strong>Territory:</strong></td>
                <td align=&quot;left&quot;>
                        <SELECT name=&quot;cmbTerrID&quot;>
                                
                        </select>
                </td>                                           
        </tr>
                        
</table>

</form>

</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top