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

Каков наилучший метод для добавления параметров в из объекта JavaScript, используя jQuery? I '

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

Вот что я сделал:

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

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('' + selectValues[key] + '');
  }
}

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

Это убрано и упрощеноверсия Матдумсы:

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

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

 Nick P15 окт. 2014 г., 15:03
{значение: ключ} должно быть {"значение" : ключ} как видно из Matdumsa 'ответ.
 Thedric Walker25 авг. 2011 г., 21:22
Перечисленная выше очищенная версия работает только в Jquery 1.4+. Для более старых версий используйте тот в Matdumsa 'ответ
 Dr Fred10 июл. 2017 г., 20:43
Название должно быть вместоКаков наилучший способ добавить параметры для выбора из объекта JSON с помощью jQuery?
 Kvvaradha16 окт. 2016 г., 06:41
может быть, это поможет вам -kvcodes.com/2016/10/...
 ManBugra31 мая 2011 г., 18:36
может быть, поможет:texotela.co.uk/code/jquery/select (это помогло мне после того, как я наткнулся на этот вопрос)
 Darryl Hein15 окт. 2014 г., 19:14
Я нене верю, так какvalue это строка (и жестко запрограммированная), она неТ нужно цитировать.

Ответы на вопрос(30)

Простой способ: я

$('#SelectId').html("selectLaguna");
 Loony2nz04 авг. 2011 г., 00:14
Мы уже создали мой список опций, поэтому заполнение поля выбора было таким же простым, как говорит Уиллард.

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

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

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

 Bob Stein28 окт. 2015 г., 20:33
Должно ли это бытьnew Option(value, key); ?порядок параметров есть Опции (text_visible_part, value_behind_the_scenes).
 bitoolean17 янв. 2019 г., 23:18
Isn»t Array push совместим с браузерами? Тогда, развеНе слишком ли это сложно, когда толчок массива более читабелен?

Будьте предупреждены ... Я использую 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 += '' + object.stop + '';
});

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

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

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

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

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

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

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

$('#select_id').html(items);
 Dipanwita Das20 июн. 2017 г., 08:01
$ (»#select_id») .html (пункты); работал точно так, как я хотел. используя append, он продолжает добавлять элементы во все события onchange. Огромное спасибо.
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('').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

С помощьюПлагин DOM Elements Creator (мое любимое):

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

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

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

С помощьюdocument.createElement (избегая дополнительной работы по разбору HTML с$("")):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));
 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '' + data[i].start + '';
 }

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

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

 HoldOffHunger16 июл. 2017 г., 02:41
Это'К сожалению, 90% вариантов здесь используют $ .each (). Цикл for () может дать вам гораздо больше преимуществ в управлении и производительности, даже если онменее компактный.
 Allen Tellez07 мая 2015 г., 00:14
.each является общеизвестно медленным по сравнению с другими способами достижения того же результата. Это то, о чем я думал и рекомендовал бы этот подход.

Там'Является ли проблема сортировки с этим решением в Chrome (jQuery 1.7.1) (Chrome сортирует свойства объекта по имени / номеру?). Таким образом, чтобы сохранить порядок (да, это 's объект злоупотребляет), я изменил это:

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($('', { value : key }).text(value));
}); 
Решение Вопроса

То же, что и в других ответах, в стиле jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("")
                    .attr("value",key)
                    .text(value)); 
});
 MegaMatt03 февр. 2015 г., 20:06
Я не понимаю этого, потому что$('#mySelect').append('') возвращаетselect элемент, а неoption только что добавил Таким образом, цепочка будет наselect, неoptionи мы неМы не хотим устанавливать значение и текст выбора - мы хотим сделать это с опцией.
 Ron13 окт. 2014 г., 12:45
@ Патрик Итак, как вы решаете этот вопрос, Патрик? Скажем, у вас есть группа элементов, как вы справляетесь с этим? (Инстад оф$ (»#mySelect ')» его "$ (».xxx ")» так что вы получите группу выбора.)
 Blauhirn10 окт. 2015 г., 14:13
этот ответ был настолько вводящим в заблуждение из-за неправильного намерения ...attr а такжеtext на самом деле методы$('')-объект
 Daniel Kmak16 сент. 2016 г., 18:50
Это ужасно использовать в реальных случаях! Если у вас есть более 100 элементов, вещи становятся грязными! Никогда не используйте это для чего-то вроде данных страны. Лучше создать строку HTML и добавить ее после окончания цикла! :)
 Patrick12 окт. 2014 г., 09:03
Я бы в первую очередь назначил$("#mySelect") к вар, в противном случае вызов$("#mySelect") каждый раз внутри цикла очень расточительно, как и обновление DOM. Смотрите пункты № 3 и № 6 вartzstudio.com/2009/04/jquery-performance-rules/...
 Patrick14 окт. 2014 г., 18:50
ну вы могли бы просто сделатьvar mySelect = $("#mySelect") outside of the каждый цикл Это было бы намного эффективнее. См Карлответ ниже
 raveren28 окт. 2015 г., 17:57
Этот ответ использует устаревшие методы jQuery, смехотворно неэффективен и все еще приносит 90% всей репутации ответчиков. Stackoverflow далеко не сломан, но это ужасно для сайта.
 McGuireV1027 мар. 2015 г., 20:16
Мэтт, проверьте скобки вложенности. .Append () находится на выделении, все остальное внутри добавления. $ ( "<Опция />») является сокращением jquery для создания нового элемента опции, и .val (ключ) и .text (значение) применяются к этой новой опции, которая затем добавляется к выбору. (Я'м со ссылкой на ФлоБолее краткий синтаксис в комментарии выше вашего, но то же самое верно и для ответа верхнего уровня.)
 Fredrick Gauss18 июл. 2017 г., 13:31
Мое дополнительное предложение к кешированию$('#mySelect') это использованиеfor цикл вместо.$.each()
 ebragaparah09 февр. 2016 г., 22:17
Это'это хорошее решение, но ононе так продуктивно :( DOM вызывается много раз, в зависимости от размера вашего списка объектов, IMHO, вам следует избегать этого, если вы действительно заботитесь о производительности.
 jthomas03 июн. 2015 г., 05:48
С популярностью этого ответа этоСтоит отметить, что вы должны избегать обновлений DOM в циклах.jsperf.com/jquery-append-array-vs-string
 FAjir28 нояб. 2014 г., 16:03
Моя рекомендация для лучшего стиля jQuery: $ ('#mySelect») .append ($ ("<Опция />») .val (ключ) .text (значение)); I '
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));
}
 Darryl Hein01 июн. 2011 г., 06:06
Никогда не слышал оOption возражать раньше. Это встроено во все браузеры?
 Carl Hörberg01 июн. 2011 г., 23:22
 Carl Hörberg02 февр. 2012 г., 09:15
@ Mark0978 на самом деле это (new Option('display', value, true, true)javascriptkit.com/jsref/select.shtml)
 simon11 апр. 2012 г., 10:50
Первый метод не работает в IE8.
 boatcoder20 сент. 2011 г., 05:47
Хороший способ добавить выбор тоже.new Option('display', value, true)
 Darryl Hein21 июл. 2011 г., 03:36
Я пытался с помощьюnew Option, но обнаружил, что это неработать в IE6 & 7. Я неУ меня нет причины, но многие из полных опций jQuery работали.

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

УвидетьДжон Резигмысли по этому вопросу...

Что-то вроде:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += ""+data[i][text]+"";

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

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

 vahanpwns21 мая 2016 г., 02:19
вы можете оптимизировать это дальше и избежать использования jQuery в целом, заменив$("#myselect").empty().append(opts); сgetElementById('myselect').innerHtml = opts;
var output = [];

$.each(selectValues, function(key, value)
{
  output.push(''+ value +'');
});

$('#mySelect').html(output.join(''));

Таким образом, вы "дотронься до DOM только один раз.

я не уверен, что последнюю строку можно преобразовать в $ ('#mySelect») .Html (output.join ( '')) потому что я неЯ не знаю внутренностей jQuery (возможно, он выполняет некоторый анализ в методе html ())

 MM.08 апр. 2012 г., 19:36
Одним небольшим улучшением является объединение с использованием соединения, а не знака плюс, например: output.push ('<значение параметра = "', ключ, ""> ', значение, '<Опция />»);
 Thorpe Obazee09 нояб. 2009 г., 08:04
Вы метод, очевидно, быстрее, чемправильный' ответ выше, так как он использует меньше JQuery тоже.
 James Westgate12 июн. 2015 г., 10:59
Если вам не нужно поддерживать IE8, то родной Array.forEach станет хорошей заменой для $ .each.
 blu06 янв. 2010 г., 05:46
линия "$ (»#mySelect») .get (0) .innerHTML = output.join ('');» работает в Chrome и FF3.x, но не в IE7, насколько я могу судить
 321X28 авг. 2012 г., 22:58
+1 это решение, но $ .each стал НОВЫМ узким местом. Замените его старомодным циклом for, где / если применимо:jsperf.com/for-vs-foreach/37
 VansFannel11 июл. 2011 г., 11:52
И, если у меня есть два варианта, которые я нене хочу проигрывать. Как я могу добавить эти новые значения параметров к существующим?
 gpilotino20 янв. 2010 г., 11:18
если ключ имеет несколько кавычек или < или> тогда не действует HTML. нативный innerHTML работает быстрее, чем использование jquery html ().
 nickf19 янв. 2010 г., 13:03
Это ломается, еслиkey есть некоторые цитаты или>,

Установите свой HTML select id в следующую строку ниже. ЗдесьmySelect используется в качестве идентификатора элемента select.

   var options = $("#mySelect");

затем получите объект, который является selectValues в этом сценарии, и установите его в jquery для каждого цикла. Он будет использовать значение и текст объектов соответственно и добавляет его в варианты выбора следующим образом.

$.each(selectValues, function(val, text) {
            options.append(
             $('').val(val).html(text)
          );
      });

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

Например, "1": "

тест 1 "," 2 ":"тест 2 ",

Падать,

отображаемое имя: тест 1 -> значение равно 1 отображаемое имя: тест 2 -> значение 2

 Vinay Prajapati11 апр. 2018 г., 08:14
пожалуйста, опишите немного о решении.

Я решил перезвонить немного.

Иметь дело с ранее выбранной опцией; некоторые браузеры портятся, когда мы добавляемТОЛЬКО ударил DOM один раз с добавлениемИметь дело сmultiple свойство при добавлении дополнительных параметровПокажите, как использовать объектПоказать, как сопоставить, используя массив объектов

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');


  empty



  2empty

Компромисс между двумя верхними ответами, в "один лайнер":

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

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

Формат 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('-- Select Category --');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}
$.each медленнее, чемfor петляКаждый раз, выбор DOM не лучшая практика в цикле$("#mySelect").append();

Таким образом, лучшее решение заключается в следующем

Если данные JSONresp является

[
    {"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
 Chris2215 янв. 2015 г., 15:23
где ?emp_id

@joshperry

Кажется, что равнина.append также работает как положено,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("").val(k).text(v);
  })
);
 Jochem Schulenklopper02 авг. 2017 г., 20:28
Бонусные очки за элегантность: соответственно используяmap() построить в сочетании с собственностьюappend() правильно добавить массив объектов!
 Chef_Code08 апр. 2017 г., 05:55
Вы могли бы использовать в качестве альтернативы$.weakmap чтобы разрешитьGC

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

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



  append selectbox using jquery
  
  

  
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("")
                    .attr("value",key)
                    .text(value)); 
});

    }
  




      
    1
    2
    3
    4
  




 Samuel Liew11 апр. 2018 г., 10:47
Это'Хорошая практика по переполнению стека - добавить объяснение того, почему ваше решение должно работать. Для получения дополнительной информации читайтеКак ответить.

Еще один способ сделать это:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);
 Chef_Code08 апр. 2017 г., 05:51
Я вижу, что вы сделали здесь ... Вы приняли совет для кэширования$('#mySelect') затем рефакторинг @rocktheroad ответ ... что угодно, это более практичное решение

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

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


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


    {{= Text}}

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

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

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

вев блоге этот подход более подробно.

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

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

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

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "" + option.title + "";
});

$('#selectBox').append(auxArr.join(''));
 bitoolean17 янв. 2019 г., 23:15
Безразлично»т это значит "быстрый» путем вставки различных частей строки также в виде отдельных элементов массива, вместо объединения каждой опции 'составляющие единицы перед вставкой в массив, так как они все равно будут объединены как один в конце?

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

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

 ckarbass04 окт. 2013 г., 23:32
@ Sushanth-- насколько велика производительность, если набор маленький?
 Sushanth --09 мая 2013 г., 23:23
Думаю, будет лучше кэшировать `$ ('#mySelect») `, так что вы смотрите только один раз перед циклом. В настоящее время он ищет в DOM элемент для каждой опции.
 idok10 апр. 2013 г., 06:22
Отлично. Чтобы добавить его, можно добавить дополнительные атрибуты для выбора. $ .each (selectValues, функция (идентификатор, значение, текст) {$ ('#mySelect») .Append ($ ( "<Опция />», {id: id значение: значение, текст: текст})); });
 Nick H24702 февр. 2015 г., 13:41
@ckarbass - зависит, насколько велика ваша DOM. Потенциально большие и очень малые усилия, чтобы присвоить его переменной, значительно меньше, чем написать комментарий в SO!

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

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

Вместо того, чтобы повторять один и тот же код везде, я бы посоветовал написать свою собственную функцию jQuery, например:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('', { value: key }).text(value));
};

Затем, чтобы добавить опцию, просто сделайте следующее:

$('select').addOption('0', 'None');
 Mo.17 окт. 2016 г., 12:36
Не могли бы вы уточнить?

Тот'Что я сделал с двумерными массивами: первый столбец - это элемент i, добавьте кinnerHTML из, Второй столбец - record_id i, добавьте кvalue из :

PHP

$items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
    $first_name = $item->first_name;
    $last_name = $item->last_name;
    $date = $item->date;
    $show = $first_name . " " . $last_name . ", " . $date;
    $request_id = $request->request_id;
    $items_arr[0][$i] = $show;
    $items_arr[1][$i] = $request_id;
    $i++;
}

echo json_encode($items_arr);

JavaScript / Ajax

        function ddl_items() {
            if (window.XMLHttpRequest) {
                // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var arr = JSON.parse(xmlhttp.responseText);
                var lstbx = document.getElementById('my_listbox');

                for (var i=0; i
 Darryl Hein15 авг. 2012 г., 05:24
Выглядит хорошо. Жаль, чтоне использует jQuery. Также я'До этого у нас были проблемы с методом select.options.add (). Можно'Не могу вспомнить, какой браузер и какая именно проблема, но я решил уйти от этого и позволить jQuery разобраться с различиями.
 Salty15 авг. 2012 г., 22:25
Я полный нуб с PHP и JQuerry, но приведенный выше код работает во всех браузерах. единственная проблема - этоне очень хорошо работает на iPhone, я отправил вопрос об этом, пока не повезло :(stackoverflow.com/questions/11364040/...

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

$('#mySelect').html( $.map(selectValues, function(val, key){
    return ''+ key + '';
}).join(''));
 Darryl Hein11 июл. 2017 г., 05:26
Это немного короче, но одна проблема связана с выходом из val и key vars, что делает принятый ответ.

Ваш ответ на вопрос