Question

I have a text input with a button. When I fill in the input and click the button I want to add that information to a select. Please can anyone one help, I can’t find an example anywhere.

Input & button
<input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title">
<input class="add_menu_item" name="add_menu_item" value="Add" type="button">

Select
<select name="menu_items" id="menu_items" size="8" multiple="multiple" style="height:200px; width:250px;">      
</select>

I have tried using this script but with no luck

$(document).ready(function() {
    $(".add_menu_item").click(function(){
 $('#menu_items').
      append($("<option></option>").
      attr("value").
      text(value)); 
    });

JSfiddle
http://jsfiddle.net/clintongreen/XDqQL/

Answer 1

When you call attr, you’re not actually setting a value: you’re retrieving the current value of the value attribute. You should use the val function to set the value:

$(".add_menu_item").click(function () {
    $('#menu_items').append(
        $("<option></option>").val(value).text(value)
    );
});

---

Now that I’ve seen your full code, it’s clear that the other problem is that you aren’t setting the value variable. I think you probably want something like this:

$(".add_menu_item").click(function () {
    var value = $(this).prev().val();
    $('#menu_items').append(
        $("<option></option>").val(value).text(value)
    );
});

(NB also that I’ve changed the fiddle to use jQuery rather than Mootools.)