SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    load list in drop down with tickbox

    hi, ive made a simple little page in frontpage to illustrate this request..

    i want to load a list inside a drop down if a checkbox is ticked..

    have a look at the picture here..

    http://www.londonheathrowcars.com/showlist.jpg

    basically imagine the lists contain the following..

    List 1
    Jim
    Jon

    List 2
    Lee
    Larry

    List 3
    Jane
    Jess

    when list one checkbox is ticked.. the drop down holds the list 1 values.. and so on..

    only one list can be displayed in the drop down at a time..

    of course when the items are in the list.. they would need to be selectable and active to be used in future form tasks..

    if someone can produce a simple script that can accomplish this i would be very grateful.. here is the basic html behind the page..

    thanks..

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    </head>
    
    <body>
    
    <p><input type="checkbox" name="C1" value="ON"> List 1 <br>
    <input type="checkbox" name="C2" value="ON"> List 2 <br>
    <input type="checkbox" name="C3" value="ON"> List 3</p>
    <p><select size="1" name="D1" style="width: 150">
    <option selected>Select List</option>
    </select></p>
    
    </body>
    
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    only one list can be displayed in the drop down at a time
    Then I suggest you use Radio Buttons and not Checkboxes.

    Here's 1 way of doing it:
    Code:
    <html>
    <head>
    <title>Loading list dynamically</title>
    <script type="text/javascript">
    // an array to hold the contents of all lists
    var lists = [
    	["C1","Jim"],
    	["C1","Jon"],
    	["C2","Lee"],
    	["C2","Larry"],
    	["C3","Jane"],
    	["C3","Jess"]
    ];
    
    // onclick handler for radio buttons
    function switchList() {
    	
    	var listId = this.value;	
    
    	// get rid of current items in list
    	var list = document.getElementById("theList");
    	while (list.options.length > 0) {
    		list.options.remove(0);
    	}
    	
    	var opt = new Option();
    	opt.text = "Choose a person";
    	opt.selected = true;
    	list.options.add(opt);
    	
    	for (var i=0; i < lists.length; i++) {
    		if (lists[i][0] == listId) {
    			var opt = new Option();
    			opt.value = lists[i][1];
    			opt.text = lists[i][1];
    			list.options.add(opt);
    		}
    	}
    }
    
    // add onclick handler to radio buttons
    window.onload = function () {
    	var inps = document.getElementsByTagName("input");
    	for (var i=0; i < inps.length; i++) {
    		if (inps[i].type.toLowerCase()== "radio") {
    			inps[i].onclick = switchList;
    		}
    	}
    }
    
    
    </script>
    </head>
    <body>
    <p>
    	<input type="radio" name="chooseList" value="C1"> List 1 <br>
    	<input type="radio" name="chooseList" value="C2"> List 2 <br>
    	<input type="radio" name="chooseList" value="C3"> List 3
    </p>
    <p>
    	<select id="theList" size="1" name="D1" style="width: 150">
    		<option selected>Select List</option>
    	</select>
    </p>
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it doesnt seem to work in firefox

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, lets change
    list.options.remove(0);
    to
    list.removeChild(list.options[0]);

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes that has done it..

    so can the item that is selected in the drop down still be used..

    eg

    if you choose list 1..

    and the drop down has

    Jim
    Jon

    those will be the items that are displayed in the drop down.. but will they also register as the value of that drop down..

    so when the submit button is pressed.. that item will be the option chosen and the value to be used in the form..?

    cos usually specify both like..

    <option value="Jim">Jim
    ...

    or something like that.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, when it creates new options it assigns the name to both the value and the text properties so when you submit it will send the value correctly to the server.


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
  •