Блог

Главная - Вопросы по программированию - в выпадающем списке много элементов в списке, могу ли я поделиться этим списком с несколькими исходящими списками?

в выпадающем списке много элементов в списке, могу ли я поделиться этим списком с несколькими исходящими списками?

#javascript #jquery #drop-down-menu

#javascript #jquery #выпадающее меню

Вопрос:

У меня есть страница с таким же выпадающим списком примерно в 3 местах страницы.

В выпадающих списках много элементов в списке, мне было интересно, могу ли я просто загрузить выпадающие списки из одного источника вместо того, чтобы повторять это так много раз в одном и том же (поскольку для всех выпадающих списков используются одни и те же параметры выбора).

Возможно ли это с помощью jquery?

Ответ №1:

Конечно. Допустим, в вашем исходном раскрывающемся списке есть идентификатор source , а в выпадающих списках назначения есть класс dest . Тогда это сработает:

 $(function ()
{
    $('select.dest').html($('#source > option').clone());
});

Комментарии:

1. Но будет ли при этом по-прежнему иметь 3 или что-то еще с одинаковыми данными? Я пытаюсь уменьшить размер DOM, ссылаясь на один экземпляр списка опций.

2. Вы не можете просто использовать «указатель», если вы это имеете в виду. HTML не поддерживает такого рода вещи.

3. @Blankman: если вы не просматриваете тысячи элементов DOM, размер DOM не является актуальной проблемой.

4. что ж, если вы используете IE6, слишком большое количество выпадающих списков снижает производительность страницы, вплоть до того, что прокрутка становится проблемой. Для его просмотра нужно всего около 100. (компания, наконец, выходит из iE6 в этом месяце … не могу дождаться)

5. «Если вы используете IE6» никогда не является допустимым аргументом в моей книге. К черту IE6.

Ответ №2:

 <select id="list1">
 <option>One</option>
 <option>One</option>
 <option>One</option>
</select>

<select id="list2"></select>

<select id="list3"></select>


$(function() {
  var options = $("#list1 option");
  $("#list2").html(options.clone());
  $("#list3").html(options.clone());
});

Ответ №3:

Вы можете добавить одни и те же параметры в несколько списков выбора:

 <select id="mySelect"></select>
<select id="list2"></select>
<select id="list3"></select>

var myOptions = {
    val1 : 'text1',
    val2 : 'text2',
    val3 : 'text3'
};

$.each(myOptions, function(val, text) {
    $('#mySelect').append(
        $('<option></option>').val(val).html(text)
    );
    $('#list2').append(
        $('<option></option>').val(val).html(text)
    );
    $('#list3').append(
        $('<option></option>').val(val).html(text)
    );
});

Рабочая демонстрация: http://jsfiddle.net/P2Xqd /

Ответ №4:

Три выпадающих списка не могут действительно совместно использовать один и тот же список параметров без их копирования. Единственный способ, которым вы могли бы это сделать, — создать какой-то пользовательский выпадающий список.

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