Динамическое добавление флажков в раскрывающийся список множественного выбора

Я застрял на этой проблеме в течение нескольких часов, и я схожу с ума! Мне нужно раскрывающееся меню флажков, которые я динамически заполняю в теге выбора. Мне также нужно добавить каждый раскрывающийся список с множественным выбором, который я глубоко клонирую с помощью jquery, к ряду элементов <div>. Однако каждый раз, когда я делаю это, клонированный элемент отображается как список элементов с возможностью множественного выбора (а не как раскрывающийся список и теряет все свои стили). Это контейнер с множественным выбором, в который я хотел бы добавить свои флажки:

<select class="multiselect1" multiple="multiple">


</select>

Наконец, я инициализирую каждое клонированное раскрывающееся меню, вызывая .multiselect(); Библиотека, которую я использую для этого: http://davidstutz.github.io/bootstrap-multiselect/< /а>

        $('.multiselect1').multiselect();
        var filterClone = $('.multiselect1').clone(true);
        //filterClone.multiselect();
        $('body').append(filterClone[0]);

Когда выполняются приведенные выше строки, элемент select действительно присутствует в теле, но невидим. Когда я удаляю атрибут стиля, элемент становится видимым, но отображается как список элементов с возможностью множественного выбора (что ожидается). Но почему клонированное раскрывающееся меню с множественным выбором вообще не отображается?

Любые предложения, которые могут привести меня к решению (или самим решениям!) С использованием javascript или jquery, будут наиболее оценены.


javascript jquery twitter-bootstrap bootstrap-multiselect
person user1841702    schedule 11.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ну, чтобы сделать эту работу, вам нужен JQuery. Вы включили JQuery? Если вы этого не сделали, вы можете использовать это: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> Вы загрузили все файлы на свой сервер?

Попробуйте этот код на своем сайте. Это работает?

HTML:

<select id="SOExample" multiple="multiple">
    <option value="Love it!">Love it!</option>
    <option value="Hate it!">Hate it!</option>
    <option value="I don't know...">I don't know...</option>
</select>

JS:

<script type="text/javascript">
    $(document).ready(function() {
        $('#SOExample').multiselect();
    });
</script>
person Martijn Melchers    schedule 11.01.2015
comment
@ Martijn Melchers, не могли бы вы еще раз взглянуть на вопрос, я добавил больше деталей. Клонированное выпадающее меню вообще не отображается. Когда я пытаюсь удалить атрибут стиля, элемент отображается в виде списка элементов с возможностью множественного выбора. - person user1841702; 11.01.2015
comment
Вы включили css @user1841702? - person Martijn Melchers; 11.01.2015
comment
@ Martijn Melchers, Да, я включил все необходимые файлы. Я уверен в этом, потому что когда я тестирую пример, он работает просто отлично. - person user1841702; 11.01.2015
comment
Почему у вас есть элемент class в вашем выборе? @user1841702 user1841702 Если вы хотите выбрать его с помощью javascript, у вас должен быть id - person Martijn Melchers; 11.01.2015