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

Question

Каков наилучший способ добавления параметров в <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 ().

Answer 1

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

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

Answer 2

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

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

Answer 3

Формат 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
}

Answer 4

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

Answer 5

Вот что я сделал с двумерными массивами: первый столбец - это элемент i, добавьте к innerHTML из <option>. Второй столбец: record_id i, добавьте к 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();
       }
   }
   

Answer 6

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

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

Answer 7

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

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

Answer 8

На самом деле, для повышения производительности лучше составить список опций отдельно и добавить идентификатор.

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

Answer 9

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

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>

Answer 10

Установите свой 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