Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: adding options to a select list

  1. #1
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    42
    Thanked 0 Times in 0 Posts

    Default adding options to a select list

    I have an HTML SELECT tag, and I want to be able to insert an OPTION in to it at a given time. Please help. Thanks

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    This goes in the head.
    Code:
    <script type="text/javascript">
    var addOption = function(el, value, selected) {
      var obj = document.getElementById(el),
        opt = document.createElement("option");
      opt.appendChild(document.createTextNode(value));
      opt.selected = selected;
      obj.appendChild(opt);
    }
    </script>
    Give your select tag an ID:
    Code:
    <select id="foo"...
    and use this after the select tag:
    Code:
    <script type="text/javascript">
    addOption("foo", "New Text", false);
    </script>
    The last parameter indicates whether it will be selected or not.
    - Mike

  3. The Following User Says Thank You to mburt For This Useful Post:

    hosdank (08-21-2008)

  4. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Is this close to what your asking for?:
    Code:
    <script type="text/javascript">
    function addNew(to,name,val){
    var opt = new Option(name, val);
    document.getElementById(to).add(opt, undefined);
    }
    </script>
    <select id="x" size="5">
    <option value="1">Dog</option>
    <option value="2">Horse</option>
    <option value="3">Tiger</option>
    <option value="4">Lion</option>
    </select>
    <button onClick="addNew('x','Cat','5');this.disabled=true;">Add another</button>
    The red should be in the <head> part of the document.
    Edit: Mburt beat me to it, although I think my way is better.
    Jeremy | jfein.net

  5. The Following User Says Thank You to Nile For This Useful Post:

    hosdank (08-21-2008)

  6. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    *Sighs...
    Code:
    <script type="text/javascript">
    var addOption = function(el, text, selected, value) {
      var obj = document.getElementById(el),
        opt = document.createElement("option");
      opt.appendChild(document.createTextNode(value));
      opt.selected = selected;
      opt.value = value;
      obj.appendChild(opt);
    }
    </script>
    You shouldn't have to make a new object when you have document.createElement().

    And what's that second parameter "undefined" for in add()?
    - Mike

  7. The Following User Says Thank You to mburt For This Useful Post:

    hosdank (08-21-2008)

  8. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    The undefined is telling it to put the new options at the end of the select list. Null or undefined, they'll both wrok.
    Jeremy | jfein.net

  9. The Following User Says Thank You to Nile For This Useful Post:

    hosdank (08-21-2008)

  10. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Either way, you don't need to create an object for this sort of thing. That's why we have document.createElement()
    - Mike

  11. The Following User Says Thank You to mburt For This Useful Post:

    hosdank (08-21-2008)

  12. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I was just making it off a script I made for someone a while ago:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function putIn(to,from){
    var x = document.getElementById(from);
    var i = document.getElementById(to);
    var opt = new Option(x.options[x.selectedIndex].text, x.options[x.selectedIndex].value);
    i.add(opt, undefined);
    x.remove(x.selectedIndex);
    }
    </script>
    </head>
    <body>
    <select id="1" size="6" style="width:114px">
    <option value="1">Cake</option>
    <option value="2">Cookies</option>
    <option value="3">Ice Cream</option>
    <option value="4">Lolly Pop</option>
    <option value="5">Chocolate</option>
    <option value="6">Gummy Bears</option>
    </select>
    <button onClick="putIn(2,1)">Take Away</button><br />
    <select id="2" size="6" style="width:114px">
    </select>
    <button onClick="putIn(1,2)">Put Back</button><br />
    </body>
    </html>
    Jeremy | jfein.net

  13. The Following User Says Thank You to Nile For This Useful Post:

    hosdank (08-21-2008)

  14. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    I see. Oh and you shouldn't use numbers as HTML ID's. Try doing something like: (I know, it's invalid)

    Code:
    alert(1.size);
    It won't work... Best to use letters.
    - Mike

  15. The Following User Says Thank You to mburt For This Useful Post:

    hosdank (08-21-2008)

  16. #9
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Again, it was an example, and wasn't used by anyone(as I think). So it doesn't matter.
    Jeremy | jfein.net

  17. The Following User Says Thank You to Nile For This Useful Post:

    hosdank (08-21-2008)

  18. #10
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Another one

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Untitled Document</title>
    		<style type="text/css">
    
    		</style>		
    	</head>
    	<body>
    		<div>
    			<form name="form1">
    				<select name="sel1" id="sel1">
    					<option value="default">Default Content</option>
    				</select>
    				<input type="button" name="b1" value="Add Options" />
    			</form>
    		</div>
    		<script type="text/javascript">
    		//Stored the text value pair of the new option going to be added in the select list
    		var opt = [{"Text":"Dynamic1","Value":"d1"},{"Text":"Dynamic2","Value":"d2"},{"Text": "Dynamic3","Value": "d3"}];
    		
    		//Function responsible for the dynamic addition of options into the select list
    		function addOptions(){
    			for(var i = 0; i < opt.length; i++){
    				//Creating a new option
    				var option = document.createElement("option");
    				//Assigning option's value
    				option.value = opt[i].Value;
    				//Appending a text node to the newly created option with the text value
    				option.appendChild(document.createTextNode(opt[i].Text));
    				//Appending the new option to the select list
    				document.forms['form1'].elements['sel1'].appendChild(option);
    			}
    		}
    		document.forms['form1'].elements['b1'].onclick = addOptions;
    		</script>
    	</body>
    </html>

  19. The Following User Says Thank You to codeexploiter For This Useful Post:

    hosdank (08-21-2008)

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
  •