Как добавить элемент выбора в этот список?

Question

Я хочу добавить элемент option к моему select который имеет значение, предоставленное вводом #quantite. Я хочу, чтобы при нажатии кнопки функция GetValues() добавляет элемент. Я попытался это:

<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); 
} 
} 

Я получаю сообщение об ошибке в JavaScript в mylist.add(Selectedelement);

Answer 1

document.getElementById возвращает DOM элемента. Вы должны использовать объект jQuery. И вы должны также использовать append вместо add, чтобы добавить новый элемент. Попробуйте следующее.

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

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

Answer 2

Вы можете создать новый option элемент и использовать appendChild(), чтобы добавить его в select. Попробуйте это:

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

Или чисто JQuery решения:

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

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

Example fiddle

Answer 3

Вам нужно йо добавить опцию:

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

Answer 4

Я предпочитаю простой javascript.

Посмотрите this example, я создаю элемент-элемент throw createElement API и настройки OptionElement атрибутов.