How can I add an option element in this select list?

Question

I want to add an option element to my select which has the value provided by the #quantite input. I want that when we click the button the GetValues() function adds the element. I tried this:

<input class="text" id="quantite" type="text" name="quantité" />
<select id="multiSelect" size="5" multiple="multiple">
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    <option value="o4">Option 4</option>
    <option value="o5">Option 5</option>
    <option value="o6">Option 6</option>
</select>
<br />
<button id="btnGetValues" onclick="GetValues()">Get Values</button>

function GetValues() {
    // Get select object
    var myList = document.getElementById("multiSelect");

    //Create array to store selected values
    var Selectedelement = $("#quantite").val() ;

    myList.add(Selectedelement);
}
}

I get an error in javascript in mylist.add(Selectedelement);

Where is `SelectedUsers` defined? – Parkash Kumar Dec 28 '15 at 13:35 — Parkash Kumar, Dec 28 '15 at 13:35

Rory McCrossan · Answer 1 · 2015-12-28T13:43:09.693

You can create a new option element and use appendChild() to add it to the select. Try this:

function GetValues() {
    var myList = document.getElementById("multiSelect");
    var option = document.createElement('option');
    option.value = document.getElementById('quantite').value;
    option.innerText = 'New Option';
    myList.appendChild(option);
}

Example fiddle

Or for a purely jQuery solution:

<button id="btnGetValues">Get Values</button>

$('#btnGetValues').click(function() {
    $('#multiSelect').append('<option value="' + $('#quantite').val() + '">New option</option>');
});

Example fiddle

Ibrahim Khan · Accepted Answer · 2015-12-28T13:48:17.367

1

document.getElementById returns DOM element. You should use jQuery object. And you should also use append instead of add to add new element. Try following.

function GetValues() {
     var myList = $("#multiSelect");
     var Selectedelement = $("#quantite").val();

     myList.append('<option value='+Selectedelement+'>'+ Selectedelement +'</option>');                
}

edited Dec 28 '15 at 13:48

answered Dec 28 '15 at 13:37

Ibrahim Khan

20,616
7
42
55

I'm guessing you didn't test this as it will just append the text value to a `select`, not a `option` element. Also, what is `SelectedUsers`? – Rory McCrossan Dec 28 '15 at 13:47
You are right I've not tested this before. I've updated my answer. Thanks. +1 @RoryMcCrossan – Ibrahim Khan Dec 28 '15 at 13:51
How can i display in the element here after added – r code Dec 28 '15 at 14:04
What did you mean? @rcode – Ibrahim Khan Dec 28 '15 at 14:07

void · Answer 3 · 2015-12-28T14:20:08.473

0

You need yo append an option:

$("#multiSelect").append('<option value="anyValue"> '+$("#quantiCommande").val()+' </option>');

edited Dec 28 '15 at 14:20

answered Dec 28 '15 at 13:40

void

36,090
8
62
107

@rcode see updated answer. – void Dec 28 '15 at 14:20
how can i display the content when i select one of this list: – r code Dec 28 '15 at 15:11

score 0 · Answer 4 · answered Dec 28 '15 at 14:59

0

I prefer plain javascript.

Look this example, I create node element throw createElement API and setting OptionElement attributes.

answered Dec 28 '15 at 14:59

Davide Ungari

1,920
1
13
24

How can I add an option element in this select list?

4 Answers4