Как добавить параметры в DropDownList с помощью jQuery?

279

Как говорится в этом вопросе, как добавить новую опцию в DropDownList с помощью jQuery?

Спасибо

  • 0
    Просто любопытно, почему этот вопрос был понижен? Вероятно, потому что он не показывает какой-либо фрагмент кода :)
Теги:
user-interface
drop-down-menu

11 ответов

459
Лучший ответ

Без использования каких-либо дополнительных плагинов

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Если у вас было много опций или этот код нужно было запускать очень часто, то вам следует изучить вместо DocumentFragment неоднократно модифицировать DOM. Только для нескольких вариантов, я бы сказал, что это не стоит того.

------------------------------- Добавлено --------------- -----------------

DocumentFragment является хорошим вариантом для повышения скорости, но мы не можем создать элемент option с помощью document.createElement('option'), так как IE6 и IE7 не поддерживают его.

Мы можем создать новый элемент select, а затем добавить все параметры. После завершения цикла добавьте его к реальному объекту DOM.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

Таким образом, мы изменим DOM только один раз!

  • 0
    работает как шарм :)
  • 8
    Параметры метода немного вводят в заблуждение, например, функция (val, text) должна быть функцией (index, option). Хорошо работает в противном случае.
Показать ещё 12 комментариев
155

Без плагинов это может быть проще, если вы не используете столько jQuery, а немного станете старой школой:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Если вы хотите указать, будет ли выбран вариант a) выбранным по умолчанию значением, а b), то вы можете передать еще два параметра:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );
  • 1
    Как вы устанавливаете свойства, такие как выбор значения по умолчанию?
  • 19
    Мне больше нравится этот метод, чем метод "<option></option>" ; это кажется грязным.
Показать ещё 5 комментариев
13

С плагином: jQuery Selection Box. Вы можете сделать это:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 
  • 0
    этот плагин работает в IE9
8

Возможно, вам захочется сначала очистить DropDown   $ ( '# DropDownQuality') пусто();.

У меня был мой контроллер в MVC, который возвращает список выбора только с одним элементом.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    
6

Добавить элемент в список в начале

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Добавить элемент в список в конце

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Общая операция выпадающего (Get, Set, Add, Remove) с помощью jQuery

  • 1
    Если вы используете двойные кавычки внутри параметров вашего параметра, они закроют функцию и сломают скрипт. Изменение .prepend("...") / $("...") на .prepend('...') / $('...') исправит фрагмент.
4

Заметка Pease @Phrogz не работает в IE 8, а @nickf работает во всех основных браузерах. Другой подход:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});
3

Кроме того, используйте .prepend(), чтобы добавить опцию в начало списка опций. http://api.jquery.com/prepend/

3

U может использовать прямой

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

- > Здесь вы можете использовать прямую строку

0

Мне нужно было добавить столько вариантов для выпадающих списков, сколько на моей странице были выпадающие списки. Поэтому я использовал его таким образом:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Это динамически настраивает выпадающие списки со значениями, такими как от 1 до n, и автоматически выбирает значение для порядка, в котором находится выпадающий список (т.е. второй выпадающий список "2" в поле и т.д.).

Было смешно, что я не мог использовать this или this.Object или $.obj или что-то подобное в моем втором .each(), хотя --- мне действительно нужно было получить конкретный идентификатор этого объекта, а затем захватить и передать весь объект моей функции до того, как она будет добавлена. К счастью, идентификатор моего раскрывающегося списка был разделен "_", и я мог его схватить. Я не чувствую, что должен был это сделать, но в противном случае это давало мне исключения jQuery. Что-то, что кто-то борется с тем, что мне было бы интересно узнать.

  • 0
    Почему вы увеличиваете счетчик в каждом? Вы новичок в jquery? var counter = $ ('[id * = "ddlPosition _"]'). длина менее многословна и более эффективна. Я думаю, что вам нужно немного больше опыта, прежде чем начать размещать свой код. Это не код качества производства, поскольку он плохо написан и слишком сложен для такой тривиальной задачи. Без обид, но есть причина, по которой у вас 58 ответов и нет голосов.
  • 0
    Вы явно не поняли, что я создавал. Счетчик должен увеличивать значение, опубликованное в раскрывающемся списке, и у меня было несколько с одним и тем же идентификатором, просто с другим "_ ##" на конце, поэтому .length () была бы неточной. Это причина для "id * =" в селекторе.
Показать ещё 2 комментария
0

с помощью jquery вы можете использовать

      this.$('select#myid').append('<option>newvalue</option>');

где " myid" - это id раскрывающегося списка, а newvalue - это текст, который вы хотите вставить.

0

попробуйте эту функцию:

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню