Как я могу добавить опцию в начале?

#javascript #jquery #html-select

#javascript #jquery #html-выберите

Вопрос:

У меня есть html select,

 <select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Мне нужно добавить новую опцию в этот выбор.
Если я попробую вот так:

 $('#myselect').appendTo($('<option>my-option</option>'));

my-option добавлены в конец

 <select id="myselect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>my-option</option>
</select>

Как я могу добавить опцию в начале (как first)?
Вот так:

 <select id="myselect">
    <option>my-option</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Ответ №1:

Во-первых, вы имеете в виду append , а не appendTo . append добавляет содержимое параметра к выделению; appendTo добавляет выделение к элементу, указанному в параметре.

Во-вторых, возможно, интуитивно, вы можете использовать prepend :

 $('#myselect').prepend($('<option>my-option</option>'));

Ответ №2:

В POJS вы бы использовали insertBefore() , например

 var select = document.getElementById('mySelect');
var opt = new Option('', 'my-option');
select.insertBefore(opt, select.firstChild);

1. Я использовал что-то очень похожее. Я изменил последнюю строку на: select.insertBefore(opt, select.options[0]); Преимущество в том, что таким образом вы можете вставить свою опцию в любом месте select, что мне и нужно было сделать.

2. ИМО, это предпочтительный вариант по сравнению с jQuery. Смотри также: i.stack.imgur.com/Bzawb.gif

Ответ №3:

Используйте prependTo()

~~$('#myselect').prependTo($('my-option'));//опечатка?~~

Возможно, вы имели в виду это

$('#myselect').prepend($('<option>my-option</option>'));

http://api.jquery.com/prependTo

http://api.jquery.com/prepend/

Но в вашем коде на самом деле все наоборот. Это может быть опечатка. В любом случае, доступными методами являются prepend() и prependTo()