Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu

<form>
  <select name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
  </select>
</form>

Should I use an array? I been searching the net but couldn't find anything that would help.

Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu

<form>
  <select name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
  </select>
</form>

Should I use an array? I been searching the net but couldn't find anything that would help.

• javascript
• html

Share Improve this question Follow edited Jul 14, 2012 at 13:56 Andrew Marshall 97.1k2020 gold badges227227 silver badges217217 bronze badges asked Jul 14, 2012 at 13:50 DymondDymond 2,28777 gold badges4646 silver badges8282 bronze badges 3

• 2 What does this mean? What form? How are you adding them? Client-side with Javascript? – Rudi Visser Commented Jul 14, 2012 at 13:53
• Now I just add them in the code, I want to be able to use a simple form to add some other values. Java script should do it, but i really dont know how – Dymond Commented Jul 14, 2012 at 13:54
• @FelipeOtarola If you want Javascript, then tag your question so instead of as PHP. Also, your ment doesn't clarify your question very much. – Andrew Marshall Commented Jul 14, 2012 at 13:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is a JavaScript solution to add items to a drop down.

The HTML to use..

 <form>
    <select id="categories" name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
    </select>
    </form>​​

JavaScript code...

var categories = document.getElementById("categories");

var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');

categories.appendChild(newOption);
​

jQuery code... (a lot shorter)

$("#categories").append("<option value='newvalue'>New Value</option>");

Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!

You could look into jQuery append() and option() with click event...

I've just created a working solution for you. Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>

<select id="mySelect"></select>
<p>&nbsp;</p>
<input type="text" id="string"><br>
<button id="append">Append</button>


$('#append').click(function(){
    var str = $('#string').val();
    var substr = str.split(', ');
    $('#mySelect').append( new Option(substr[0],substr[1]));
});

Here is a working version: http://jsfiddle/SCf8m/1/