SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I add a new option to a drop down list?

    Hello,
    How can I add a new option to a drop down list?.
    I have a form made of:
    - a drop down list.
    - an input field where the user can enter a value. Once the user clicks on the "modify" button, the value entered shoud be added to the list.
    How can I do it?

    Code:
    <form onSubmit="return false" method="post" name="my_form" action="">
    <table>
    <tr>
    <td>
    <SELECT NAME="my_list">
    <option value="toto" >toto</option>
    <option value="titi">titi</option>
    <option value="Other...">Other...</option>
    </SELECT>
    </td><tr>
    <td><input type=text name=new_value></td>
    <td><input type=button onclick=addNewValue(this) name="modify"</td>
    </table> 
    </form>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd fix up these two lines like this:
    Code:
    <td><input type="text" name="new_value"/></td>
    <td><input type="button" onclick="addNewValue(this);" name="modify"/></td>
    then you can add this function to do the work
    Code:
    function addNewValue(el) {
    	var list = el.form.elements["my_list"];
    	var entry = el.form.elements["new_value"];
    	
    	var opt = document.createElement("option");
    	opt.value = entry.value;
    	opt.appendChild(document.createTextNode(entry.value));
    	
    	// assuming you want "Other..." to remain the last element
    	var other = list.options[list.options.length - 1];
    	list.insertBefore(opt,other);
    	
    	entry.value = "";
    
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for the code!!! It is exactly what I was looking for!!!

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more question... I have modified the routine so it does what I want... the select name can be found in "cur_type" and the name of the field is "new_type"...and my question is: How can the new option remained the first one?
    [CODE]
    function addNewValue()
    {
    var list = document.forms[0].elements[cur_type];
    var entry = document.forms[0].elements["new_"+cur_type]

    var opt = document.createElement("option");
    opt.value = entry.value;
    opt.appendChild(document.createTextNode(entry.value));

    // assuming you want "Other..." to remain the last element
    var other = list.options[list.options.length - 1];
    list.insertBefore(opt,other);

    entry.value = "";
    }

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want the new option to appear first on the list? sure.

    change
    var other = list.options[list.options.length - 1];
    to
    var other = list.options[0];

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THanks but it still does not do exactly what I want!. Is there a way of making this value "selected"?
    WHat I do exactly is the following:
    THere is a select list with the "other" option. If the user clicks on the "other" option, a new field appears and he can enter somethings. Once he clicks on "Modify" button, some checks are run and this option is added to the list BUT this option should appear now as the selected option.

    Thanks again for your help and patience

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var other = list.options[0];
    list.insertBefore(opt,other);
    list.selectedIndex = 0;

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean that the drop down menu is correct (selected option first) but in the selected field.... the "other..." option still appears and I need it to be "the new option".
    THanks

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works just fine!!!! Thank you so much!!

    Just one more thing.... the list at the beginning was sorted alphabetically.... is there an easy way to have it sorted after the option is entered?

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry the question is not clearly asked.... I mean new options can be added and at the end I would still like the whole list ordered. is there a simple way to do so?

  11. #11
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm...
    the list at the beginning was sorted alphabetically
    No it wasn't! toto comes AFTER titi if that's the case. Anyway, assuming it should be sorted initially...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var cur_type = "theList";
    
    function addNewValue(el) {
    	var list = el.form.elements[cur_type];
    	var entry = el.form.elements["new_" + cur_type];
    	
    	var opt = document.createElement("option");
    	opt.value = entry.value;
    	opt.appendChild(document.createTextNode(entry.value));
    	
    	// insert the new option alphabetically
    	var insertLocation = -1;
    	for (var i=0; i < list.options.length - 1; i++) {
    		if (list.options[i].value > entry.value) {
    			insertLocation = i;
    			break;
    		}
    	}
    	if (insertLocation == -1) {
    		insertLocation = list.options.length - 1;
    	}
    	
    	var other = list.options[insertLocation];
    	list.insertBefore(opt,other);
    	list.selectedIndex = insertLocation;
    	
    	entry.value = "";
    
    }
    </script>
    </head>
    <body>
    <form onSubmit="return false" method="post" name="my_form" action="">
    <table>
    <tr>
    <td>
    <SELECT NAME="theList">
    <option value="titi">titi</option>
    <option value="toto">toto</option>
    <option value="Other...">Other...</option>
    </SELECT>
    </td><tr>
    <td><input type="text" name="new_theList"/></td>
    <td><input type="button" onclick="addNewValue(this);" name="modify"/></td>
    </table> 
    </form>
    </body>
    </html>

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mea culpa!!! That's right the list wasn't sorted but it was meant to be!!
    Thank you so much for your help!


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
  •