www.webdeveloper.com
Results 1 to 5 of 5

Thread: Add Option to Listbox

  1. #1
    Join Date
    Dec 2009
    Posts
    16

    Add Option to Listbox

    I have a text box in which the user enters text, clicks a button, and the text then appears in a listbox directly below.

    Here is my function:

    function addIt() {
    var txt = window.document.recipe_form.new_category_text.value;
    addOption = new Option(txt,txt); window.document.recipe_form.category_dropdown.options[numItems++] = addOption;
    return true;
    }

    Here is my code:

    <form name="recipe_form">
    <input type="text" name="new_category_text">
    <input type="button" name="add_category" value="Add Category" onclick="addIt();">
    <td style="border:none">
    <select name="category_dropdown" style="width:200px;height:75px;" multiple size="2">
    <option selected="selected">Bread</option>
    <option>Dessert</option>
    <option>Meat</option>
    <option>Pasta</option>
    <option>Potatoes</option>
    <option>Salad</option>
    </select>
    </td>
    </form>

    I don't know what I'm doing wrong; any help would be greatly appreciated!!!

  2. #2
    Join Date
    Oct 2006
    Posts
    939

    one way to try...

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD><TITLE>Su1-0pm22</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
    
    </STYLE>
    <SCRIPT type="text/javascript">
    var opts=['Bread','Dessert'];
    function addIt(x) {
    	var so='';
    	if(x){opts.push(x)}
    	for(i=0;i<opts.length;i++){so+='<option>'+opts[i]+'</option>'}
    		if(x){document.getElementById('category_dropdown').innerHTML=so}
    		else{return so;}
    }
    </SCRIPT>
    <META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    <BODY scroll="auto">
    <form name="recipe_form">
    	<input type="text" name="new_category_text">
    	<input type="button" name="add_category" value="Add Category" onclick="addIt(document.forms['recipe_form'].elements[0].value);">
    
    <td style="border:none">
    	<select id="category_dropdown" name="category_dropdown" style="width:200px;height:75px;" multiple size="2">
    
    <SCRIPT type="text/javascript">
    document.write(addIt())
    </SCRIPT>
    	</select>
    </td>
    </form>
    		Bread
    		Dessert
    		Meat
    		Pasta
    		Potatoes
    		Salad
    </BODY></HTML>

  3. #3
    Join Date
    Dec 2009
    Posts
    16
    thanks so much for your reply! i have no clue what you did ; I have code associated with clicking on a category option, so I don't want to change the code associated with the category listbox - is there any way to add an option using some of the code I sent you?

    thanks so much!

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    The other method is appendChild(node)

    But you'll have to upload your code if you want help with that.

  5. #5
    Join Date
    Dec 2009
    Posts
    16
    thanks so much - i dont think ill do that for now, but i will def. keep it in mind because i have to figure it out!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles