Как отобразить элементы выпадающего меню внутри выпадающего с помощью JavaScript?

Question

Как отобразить элементы выпадающего меню внутри выпадающего с помощью JavaScript?

Ниже мой HTML:

 <div class="row">
<div class="col-lg-11">
<ul  class="list-unstyled" id="slider">
</ul>
</div>
</div>

Ниже мой javascript:

var locationbegin="<div class='form-group'><label>Location</label><select
class='form-control' id='location'><option>test</option>";
$("#slider").append(locationbegin);

var locationoptions = "<option>tester</option>";
$("#slider").append(locationoptions);

var locationend="</select> </div>";
$("#slider").append(locationend);

Ниже вывод:

Проблема в том, что тестер выходит из выпадающего списка. Я не уверен, где я иду не так. Вы также можете использовать http://rendera.herokuapp.com/ сделать код.

Редактировать: причина, по которой javascript отделен, заключается в некотором другом коде javascript между ними в коде.

0

drop-down-menu javascript php twitter-bootstrap

Решение

Другие решения

Ох, это не так, как это работает. .append автоматически добавит closing tags если ваши строки HTML не имеют его.

Так что сразу после первого вызова append ваш html станет:

<div class='form-group'>
<label>Location</label>
<select class='form-control' id='location'>
<option>test</option>
</select>
</div>

И дальнейшие вставки произойдут после этого HTML.

Так что вместо этого сделайте это:

var locationbegin="<div class='form-group'><label>Location</label><select
class='form-control' id='location'><option>test</option>";
var locationoptions = "<option>tester</option>";
var locationend="</select> </div>";

$("#slider").append(locationbegin + locationoptions + locationend);

0

Источник

Accepted Answer

Вы ошибаетесь, не используя правильный HTML. Вы должны закрыть теги, или браузер сделает это за вас всякий раз, когда рассчитывает. append сначала превращает ваш HTML в NodeList (что приводит к select а также div будучи закрытым), а затем я добавлен к ползунку. Теперь, если вы добавите дальше options на эту структуру HTML, вы эффективно добавляете это за закрытой div,

Вы должны сохранить ссылку на select чтобы иметь возможность добавлять больше оптино, когда захотите:

а) создать окружающую разметку:

var myFormField = $('<div class="form-group"><label>Location</label><select class="form-control" id="location"><option>test</option></select></div>')

б) найти select и сохранить его в переменной:

var mySelect = myFormField.find('#location');

в) добавить столько вариантов, сколько хотите

mySelect.append('<option>Value 2</option>');
mySelect.append('<option>Value 3</option>');
mySelect.append('<option>Value 4</option>');

1