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

javascript jquery arrays html-select

940763 просмотра

30 ответа

Каков наилучший способ добавления параметров в <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: (1) убрал тег закрытия для опции внутри append () и (2) переместил свойства / атрибуты на карту как второй параметр append ().

Автор: Darryl Hein Источник Размещён: 11.11.2019 02:19

Ответы (30)


1344 плюса

Решение

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

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});
Автор: matdumsa Размещён: 04.10.2008 09:12

259 плюса

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

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

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

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

Автор: gpilotino Размещён: 05.11.2009 07:42

197 плюса

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

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Автор: rocktheroad Размещён: 01.07.2010 07:00

90 плюса

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));
}
Автор: Carl Hörberg Размещён: 31.05.2011 10:52

34 плюса

Если вам не нужно поддерживать старые версии IE, использование Optionконструктора - это, безусловно, лучший путь, удобочитаемое и эффективное решение :

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

Это эквивалентно по функциональности, но чище, чем:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Автор: Nickolay Размещён: 05.10.2008 03:49

29 плюса

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

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

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

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

$('#selectBox').append(auxArr.join(''));
Автор: m1sfit Размещён: 21.12.2009 03:50

20 плюса

@joshperry

Кажется, что обычный .append также работает, как и ожидалось,

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

    return $("<option>").val(k).text(v);
  })
);
Автор: Сухой27 Размещён: 17.04.2013 11:29

20 плюса

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

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

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

Автор: Animism Размещён: 11.10.2013 05:20

16 плюса

Будьте предупреждены ... Я использую 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);
Автор: Jack Holt Размещён: 16.09.2011 01:22

16 плюса

 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('');

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

Автор: Teej Размещён: 09.11.2009 06:29

13 плюса

Есть подход, использующий подход 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");

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

Автор: Nick Josevski Размещён: 08.07.2010 05:00

10 плюса

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

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

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

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

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

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

$('#select_id').html(items);
Автор: Komang Размещён: 05.10.2008 04:52

8 плюса

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

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

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

Автор: joshperry Размещён: 01.10.2010 05:22

8 плюса

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

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
Автор: willard macay Размещён: 25.03.2010 03:04

8 плюса

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

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

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

$('select').addOption('0', 'None');
Автор: Matt Размещён: 03.02.2016 04:21

7 плюса

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

Автор: H Sampat Размещён: 05.02.2010 11:56

7 плюса

  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);
Автор: Salim Размещён: 08.09.2014 08:47

6 плюса

Существует проблема с сортировкой этого решения в 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));
}); 
Автор: Michail Размещён: 21.09.2012 09:27

6 плюса

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

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);
Автор: DiverseAndRemote.com Размещён: 25.04.2013 09:59

6 плюса

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 только один раз после создания гигантской нити.

Автор: Christian Roman Размещён: 02.10.2013 05:16

6 плюса

Хотя все предыдущие ответы являются действительными, может быть целесообразно сначала добавить их в 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);
Автор: Stuart.Sklinar Размещён: 26.11.2012 04:38

5 плюса

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

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

Автор: kashif Размещён: 21.07.2010 04:14

4 плюса

Плагин jQuery можно найти здесь: http://remysharp.com/2007/01/20/auto-population-select-boxes-using-jquery-ajax/ .

Автор: lkahtz Размещён: 24.12.2010 04:23

4 плюса

Вот что я сделал с двумерными массивами: Первый столбец элемент я, добавить innerHTMLиз <option>. Второй столбец record_id я, добавить к valueиз <option>:

  1. 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);
    
  2. 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<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }
    
Автор: Salty Размещён: 09.08.2012 07:08

4 плюса

Формат 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
}
Автор: M.J Размещён: 30.07.2016 10:43

3 плюса

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

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
Автор: DW333 Размещён: 06.08.2012 05:47

3 плюса

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

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
Автор: Dr Fred Размещён: 10.07.2017 06:24

1 плюс

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>
Автор: Satyendra Yadav Размещён: 29.03.2018 04:03

1 плюс

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

   var options = $("#mySelect");

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

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

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

Например.

«1»: «тест 1», «2»: «тест 2»,

Падать,

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

Автор: Dulith De Costa Размещён: 11.04.2018 05:35

1 плюс

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

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

// 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 = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').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 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

Автор: Mark Schultheiss Размещён: 06.08.2018 02:09
Вопросы из категории :
32x32