SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Referencing Arrays in functions...

    I can't seem to get the following code snipp to work correctly.
    I'm wanting to have my php back end populate a series of arrays, and populate the first menu with the array names.
    When I click on the first menu I would like to populate the second select box with the array values.
    This is kinda working, but its not really...
    As you can see from the code, it does return the correct selected index, but it doesn't reference the array properly.
    Does anyone know how to over come this issue?


    Code:
    <script type="text/javascript" language='JavaScript'>
    tlevel = new Array('tlevel','Standard User','Moderator','Administrator');
    tgstat = new Array('Pending Member','Full Member','Guild Officer','Guild Leader','Retired Member');
    dfont = new Array('GuildOfficer','GuildLeader');
    
    function selectlist(items){
    	var sel = document.listeditor.dest;
    	for (var q=sel.options.length;q>=0;q--) sel.options[q]=null;
    	var listlength = items.length
    	alert(items);
    	alert(listlength);
    	for ( x = 0 ; x < items.length; x++ ){
    		myEle = document.createElement("option");
    		myEle.value = x;
    		myEle.text = items[x];
    		sel.add(myEle);
    	}
    }
    
    function showitem(selected){
    	//alert(selected);
    }
    
    </script>
    
    <br><br>
    <form name="listeditor" method="post">
    <table border='1' align='center'>
    <tr>
    	<td align='center'>Lists</td><td width='25' ID='NewTitle'>&nbsp;</td><td align='center'>Items</td><td align='center'>Edit</td>
    </tr>
    <tr>
    	<td>
    		<!-- On click Load the Value array into the dest select box -->
    		<!-- On Load, open the First array in this List -->
    		<!-- If changes have been made to the 'DEST' List ask to save changes -->
    		<!-- These Select Options are automaticly populated by PHP -->
    		<select name="source" id="source" size="12" onchange="selectlist(this.options[this.selectedIndex].value)">
    		<OPTION value="tlevel">tlevel
    		<OPTION value="tgstat">tgstat
    		<OPTION value="dfont">dfont
    		</select>
    	</td>
    	<td width='25' id='NewItem'>
    	&nbsp;
    	</td>
    	<td>
    		<table border='0' cellpadding='0' cellspacing='0'>
    			<tr><td>
    				<select name="dest" id="dest" size="12" onchange="showitem(this.options[this.selectedIndex].value)">
    				</select>
    				</td>
    				<td>
    					<input type="button" value="?" title="move selected item up" onclick=""><br /><br>
    					<input type="button" value="?"  title="move selected item down" onclick=""><br><br>
    				</td>
    			</tr>
    		</table>
    	</td>
    	<td valign='top'>
    		<!-- Allow additions to the 'DEST' array -->
    		Add an Item:<br><input type='text' name='tmp'><br><input type="button" value="<< Add" onclick="">
    	</td>
    </tr>
    <tr>
    	<!-- Save -- Saves the current active list. Delete -- removes the currently selected item in the 'DEST' List. Prompts for confirmation -->
    	<td colspan='4' align='center'><input type="button" name="b1" value="Delete" onclick=""><input type="button" name="b1" value="Save" onclick=""></td>
    </tr>
    </table>

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got a couple of issues here: the first involves passing a string (items) - form values are strings - and then using it as if it were a variable (tlevel, tgstat, dfont). To reference a variable name (identifier) as a string, you need to 'plug it in' to the appropriate parent object, using square brackets. For globals, window['string'] works - but why not make your own object and keep things tidy?
    Code:
    var things = {
    tlevel: ['tlevel','Standard User','Moderator','Administrator'] ,
    tgstat: ['Pending Member','Full Member','Guild Officer','Guild Leader','Retired Member'] ,
    dfont: ['GuildOfficer','GuildLeader']
    };
    Used literals there. Then:
    Code:
    function selectlist(items) {
    	var q, x, myEle, sel = document.listeditor.dest, items = things[items];
    	for (q=sel.options.length-1; q>=0; q--) sel.options[q] = null;
    	var listlength = items.length;
    	for (x=0; x<listlength; ++x) {
    		myEle = document.createElement('option');
    		myEle.setAttribute('text', items[x]);
    		myEle.setAttribute('value', items[x]);
    		sel.options.add(myEle);
    	}
    }
    The other thing is...Options.add() is strictly MSIE - i believe. I'd insert the new option by assigning it to sel.options[sel.options.length].
    Last edited by adios; Jun 28, 2003 at 12:18.
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, I was a bit confused as to how js would handle this... Thank you for your guidence...


Bookmarks

Posting Permissions

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