Results 1 to 4 of 4
  1. #1
    Join Date
    Oct 2004
    Posts
    17

    [Javascript] Scripts interfering with each other and driving me mad! Solutions?

    Hi there,

    I'm using a javascript which populates drop down boxes, based on what the user selects in another drop down box. E.g. I select 'fruit' in one drop down box, and the other drop down box will display 'apple' 'pear' and 'orange'.

    Now, this works perfectly - apart from when I come to add more than one group of drop down boxes to the page. It seems the problem is that they're interfering with each other. I use the following javascript code to add a group of 3 boxes...

    PHP Code:
    <SELECT id=firstChoice name=firstChoice onchange="selectChange(this, to.secondChoice, arrItems1, arrItemsGrp1);">
        <
    option value=0 SELECTED>Select Food</option>
        <
    option value=1>fruit</option>
        <
    option value=2>meat</option>
        <
    option value=3>vegetables</option>
    </
    SELECT>
    <
    SELECT id=secondChoice name=secondChoice onchange="selectChange(this, to.thirdChoice, arrItems2, arrItemsGrp2);">
    </
    SELECT>
    <
    SELECT id=thirdChoice name=thirdChoice>
    </
    SELECT
    To add 3 of these 'groups' to my web page, I just copied and pasted the above coding three times. Things like ItemsGrp2 are obviously used twice though, resulting in them clashing with each other.

    The javascript that this referrers to is massive. The only way I can think of doing this is to change the name of all the javascript 'tags?' in the script, a mammoth task that would literally take days!

    Basically, I would just like to do this...


    PHP Code:
    ------------------------------------------------

    JAVASCRIPT FILE

    SELECTION BOXES that will only be relevant to the javascript file above
    !
    ------------------------------------------------

    JAVASCRIPT FILE

    SELECTION BOXES that will only be relevant to the javascript file above
    !
    ------------------------------------------------

    JAVASCRIPT FILE

    SELECTION BOXES that will only be relevant to the javascript file above
    !
    ------------------------------------------------ 

    This problem has been driving me mad for many many days. I realise that this is probably the most poorly constructed message I have ever posted, it's just I found it so difficult to explain this. I just hope somebody can make sense of it.

    If someone could help me out with this, I'd be truly grateful.

    Many many many thanks in advance!

  2. #2
    Join Date
    Jul 2004
    Location
    N29° 22.725' X W95° 6.452'
    Posts
    343
    Are you still having trouble with this? If so, I had written a javascript similar to what I think you are talking about a while back and it might work for you. My script uses one select box of options to select one of seven other possible select boxes each with their own unique sets of options. Example: select box 1 has 7 catagories to choose from. Choose one and another select box appears with the options for that catagory. If this is something you are interested in let me know and I will provide details.

  3. #3
    Join Date
    Feb 2003
    Location
    Stockholm, Sweden
    Posts
    192
    OK, here's some code that I made to help another person, but I think it might help you as well.

    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    	</head>
    	
    	<script language="JavaScript">
    	var subCommodArray = new Array();
    		
    	//Values for sub commodities
    	subCommodArray[0] = new Array(2)
    	subCommodArray[0][0] = '01';
    	subCommodArray[0][1] = '0101';
    	subCommodArray[0][2] = 'Description 0101';
    	subCommodArray[1] = new Array(2)
    	subCommodArray[1][0] = '01';
    	subCommodArray[1][1] = '0102';
    	subCommodArray[1][2] = 'Description 0102';
    	subCommodArray[2] = new Array(2)
    	subCommodArray[2][0] = '01';
    	subCommodArray[2][1] = '0103';
    	subCommodArray[2][2] = 'Description 0103';
    	
    	subCommodArray[3] = new Array(2)
    	subCommodArray[3][0] = '02';
    	subCommodArray[3][1] = '0201';
    	subCommodArray[3][2] = 'Description 0201';
    	subCommodArray[4] = new Array(2)
    	subCommodArray[4][0] = '02';
    	subCommodArray[4][1] = '0202';
    	subCommodArray[4][2] = 'Description 0202';
    	subCommodArray[5] = new Array(2)
    	subCommodArray[5][0] = '02';
    	subCommodArray[5][1] = '0203';
    	subCommodArray[5][2] = 'Description 0203';
    	
    	subCommodArray[6] = new Array(2)
    	subCommodArray[6][0] = '03';
    	subCommodArray[6][1] = '0301';
    	subCommodArray[6][2] = 'Description 0301';
    	subCommodArray[7] = new Array(2)
    	subCommodArray[7][0] = '03';
    	subCommodArray[7][1] = '0302';
    	subCommodArray[7][2] = 'Description 0302';
    	subCommodArray[8] = new Array(2)
    	subCommodArray[8][0] = '03';
    	subCommodArray[8][1] = '0303';
    	subCommodArray[8][2] = 'Description 0303';
    	
    	function SubCommod(cid,list){
    		var n;
    		
    		for (n=list.length;n>0;n--){
    			list.remove(n);			
    		}
    		
    		for (n=0;n<subCommodArray.length;n++){
    			if (subCommodArray[n][0] == cid){
    				var oOption = document.createElement("OPTION");			
    				list.options.add(oOption);
    				oOption.value = subCommodArray[n][1];
    				oOption.innerText = subCommodArray[n][2];
    			}
    		} 
    	}
    	
    	</script>
    	<body bgcolor="#ffffff">
    		<form action="" method="post" name="myForm">
    			<table width="191" border="1" cellspacing="2" cellpadding="0">
    				<tr>
    					<td><b>Commodity</b></td>
    					<td><b>SubCommodity</b></td>
    				</tr>
    				<tr>
    					<td><select name="Commodity" size="1" onChange="SubCommod(this.value, this.form.SubCommodity)">
    							<option></option>
    							<option value="01">first</option>
    							<option value="02">second</option>
    							<option value="03">third</option>
    						</select></td>
    					<td><select name="SubCommodity" size="1">
    							<option></option>	
    						</select></td>
    				</tr>
    			</table>
    		</form>
    	</body>
    
    </html>

  4. #4
    Join Date
    Feb 2003
    Location
    Stockholm, Sweden
    Posts
    192
    The array is of course meant to be populated dynamically server-side.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •