Элементы из массива с помощью .map () в группу параметров

Question

У меня есть массив, созданный с использованием jquery .map ():

var options = $('#' + id + ' option'); //Id of select that is generated dynamically
        values = $.map(options, function(option) {
            return [
                option.value,
                option.text
            ];
        });

Это создает массив "03","rents", "04", "other income" et c. Когда я пытаюсь поместить их обратно в тег выбора после некоторой другой работы с массивом в качестве параметров, используя

//empty the options and rebuild
            $('#' + id).empty();
            var list = $('#' + id);
            $.each(values, function(key, value) {
                list.append($('<option>', { value: key })
                    .text(value));
            });

, я получаю каждое значение в виде текста и каждый текст в виде текста:

<option value="0">3</option>
<option value="1">rents</option>
<option value="2">4</option>
<option value="3">other income</option>

Как я могу получить так, чтобы числа были моими значениями, а текст - текстом, а не чтобы все они были в тексте?

<option value="3">rents</option>
<option value="4">other income</option>

Answer 1

Итак, есть 2 вещи.

$.map() автоматически делает массив сплющенным ... так что тут есть какая-то хитрость;]

и когда вы воссоздаете с помощью each , key означает индекс, а на самом деле value это ваши данные.

id = 1;
var options = $('#' + id + ' option'); //Id of select that is generated dynamically
values = $.map(options, function(option) {
  return [[
    option.value,
    option.text
  ]]; // put it into another array, when flatten you will get list of arrays
});
console.log(values);

// you have list of array like [[1,2],["ads","erere"]]
// thats why value[0] or value[1]        
$('#' + id).empty();
var list = $('#' + id);
$.each(values, function(key, value) {
  list.append($('<option>', { value: value[0] })
              .text(value[1])); 
});