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

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

Спасибо

Просто любопытно, почему этот вопрос был отклонен? Вероятно, потому что он не показывает ни одного фрагмента кода :)

shasi kanth 15.09.2014 14:58
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
294
1
457 873
12
Перейти к ответу Данный вопрос помечен как решенный

Ответы 12

С помощью плагина: Окно выбора jQuery. Ты можешь сделать это:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 
Ответ принят как подходящий

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

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 не поддерживают его.

Что мы можем сделать, так это создать новый элемент выбора, а затем добавить все параметры. После завершения цикла добавьте его к реальному объекту 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 только один раз!

Параметры метода немного вводят в заблуждение, например, функция (val, text) должна быть функцией (index, option). В остальном работает хорошо.

mbillard 02.07.2010 00:15

@Crossbrowser: Я не согласен - val и text фактически описывают переменные и их использование.

nickf 03.07.2010 04:34

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

mbillard 03.07.2010 06:20

Вы касаетесь модели DOM при каждом запуске цикла. Лучше использовать фрагмент документа или хотя бы составную строку и прикоснуться к DOM один раз.

Francisc 23.04.2012 15:08

Не говоря уже о том, что вы просите jQuery искать #mySelect при каждом запуске. Кешируйте его в локальную переменную, пожалуйста.

Francisc 23.04.2012 15:08

Просто убедитесь, что текст действительно "" + текст. Я столкнулся с проблемой получения данных с пространством из базы данных.

Sydwell 17.08.2012 17:40

Раньше я использовал mySelect.append(new Option(text, val));, который не работал в IE8. Пришлось перейти на mySelect.append($('<option></option>').val(val).html(text)); от @nickf

Matthew Clark 10.10.2012 00:30

есть ли способ использовать это, а также принудительно установить выбранный атрибут в качестве опции? Я думал, что .val () сделает это, но, похоже, в ie8 этого не происходит.

briansol 17.07.2013 00:42

@briansol: .attr('selected', true|false)

nickf 17.07.2013 02:34

Отличный пример, поскольку он может быть заполнен с помощью объекта словаря, что является очень распространенным сценарием. Я согласен с mbillard в том, что использование val и text, которые очень часто используются в JQuery в качестве методов, можно переименовать во что-то более наглядное.

Remy 30.07.2013 23:35

Второе перечисленное решение для меня фактически заняло почти вдвое больше времени, чем первое, для больших выпадающих списков.

Cymbals 24.09.2015 23:56

Без плагинов это может быть проще, не используя столько 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) );

Как вы устанавливаете свойства, например, выбираете значение по умолчанию?

Krishnan 16.06.2011 00:56

Этот мне нравится больше, чем метод "<option></option>"; это кажется грязным.

Josh M. 15.03.2012 22:36

не работает в ie8 .. просто попробовал и увидел еще один комментарий по этому поводу ниже.

briansol 17.07.2013 00:38

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

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

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

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

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

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

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

Вы можете сначала очистить DropDown $ ('# DropDownQuality'). Пустой ();

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

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

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

используя jquery, вы можете использовать

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

где «мой ID» - это я бы раскрывающегося списка, а новое значение - текст, который вы хотите вставить ..

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

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-й раскрывающийся список получил "2" в поле и т. д.).

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

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

Athens Holloway 06.12.2014 05:53

Вы явно неправильно поняли то, что я создавал. Счетчик должен увеличивать значение, указанное в раскрывающемся списке, и у меня было несколько с тем же идентификатором, только с другим «_ ##» в конце, поэтому .length () было бы неточным. Вот почему в селекторе стоит «id * =».

vapcguy 07.12.2014 18:31

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

vapcguy 07.12.2014 18:38

Я также мог бы больше доверять $ (this) .length () в этом цикле, если бы кто-нибудь мог объяснить, почему отправка «$ (this)» вместо объекта в myAppender не сработала.

vapcguy 07.12.2014 18:47

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

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

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

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

Обычная операция раскрывающегося списка (получение, установка, добавление, удаление) с использованием jQuery

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

Heraldmonkey 02.02.2016 17:09

Предположим, ваш ответ - «successData». Он содержит список, который вам нужно добавить в качестве параметров в раскрывающемся меню.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Это сработает для вас ....

Другие вопросы по теме