javascript - remove - select new option jquery




Каков наилучший способ добавить опции для выбора из JS-объекта с помощью jQuery? (20)

Каков наилучший способ добавления опций в <select> из объекта JavaScript с помощью jQuery?

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

Это то, что я сделал:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Чистое / простое решение:

Это очищенная и упрощенная версия matdumsa's :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Изменения от matdumsa's: (1) удалили тег close для опции внутри append () и (2) перенесли свойства / атрибуты на карту в качестве второго параметра append ().


JQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Ванильный JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

  1. $.each медленнее, чем цикл for
  2. Каждый раз выбор DOM не является лучшей практикой в ​​цикле $("#mySelect").append();

Поэтому лучшим решением является следующее

Если данные JSON resp

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

используйте его как

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Be forwarned ... Я использую jQuery Mobile 1.0b2 с PhoneGap 1.0.0 на Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) и не смог получить метод .append () для работы вообще. Мне пришлось использовать .html (), как показано ниже:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

В этом решении есть проблема с сортировкой в ​​Chrome (jQuery 1.7.1) (свойства сортировки сортируются по имени / номеру в Chrome). Поэтому, чтобы сохранить порядок (да, это злоупотребительный объект), я изменил это:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

к этому

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

а затем $ .each будет выглядеть так:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Все эти ответы кажутся излишне сложными. Все, что тебе нужно:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Это полностью совместимо с браузером.


Вы можете просто перебрать ваш массив json со следующим кодом

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");


Использование плагина DOM Elements Creator (мой любимый):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Использование конструктора Option (не уверен в поддержке браузера):

$(new Option('myText', 'val')).appendTo('#mySelect');

Использование document.createElement (избегая дополнительной обработки синтаксического анализа HTML с помощью $("<option></option>") ):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

Используя функцию $ .map (), вы можете сделать это более элегантным способом:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Компромисс между двумя верхними ответами в «одном слое»:

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Создает массив элементов Option с использованием map а затем добавляет их все в Select сразу, используя apply для отправки каждого параметра в качестве отдельного аргумента в функции append .



Существует подход, использующий подход Microsoft Templating, который в настоящее время находится в предложении для включения в ядро ​​jQuery. Там больше возможностей в использовании шаблонов, поэтому для простейшего сценария это может быть не самый лучший вариант. Более подробную информацию см. В сообщении Скотта Гу, в котором излагаются особенности.

Сначала включите шаблон js-файл, доступный из github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Следующая настройка шаблона

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Затем с вашими данными вызовите метод .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

Я blogged этот подход более подробно.


Формат JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

И код jQuery для заполнения значений в раскрывающемся списке Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Это выглядит лучше, обеспечивает читаемость, но медленнее, чем другие методы.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Если вы хотите скорость, самый быстрый (проверенный!) Способ - это использование массива, а не конкатенация строк, и использование только одного вызова append.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

Это немного быстрее и чище.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

Я обнаружил, что это просто и отлично работает.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Я сделал что-то вроде этого, загружая выпадающий элемент через Ajax . Ответ выше также является приемлемым, но всегда полезно иметь как можно меньшую модификацию DOM для повышения производительности.

Поэтому вместо добавления каждого элемента внутри цикла лучше собирать элементы в цикле и добавлять его после его завершения.

$(data).each(function(){
    ... Collect items
})

Добавьте его,

$('#select_id').append(items); 

или даже лучше

$('#select_id').html(items);

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

Я сделал несколько тестов, и это, я считаю, делает работу самой быстрой. :П


$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Он хорошо работает с jQuery 1.4.1.

Полная статья для использования динамических списков с помощью ASP.NET MVC & jQuery: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx


if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Это манипулирует DOM только один раз после первого построения гигантской струны.





html-select