使用 select2 使用来自多维数组的数据填充下拉列表

Question

我正在发送以下两个属性的响应数据：

response["gender"] = 'Male' #Or whatever is the value from database
response["gender_choices"] = [
  [, '-----------------'],
  ['MALE', 'Male'],
  ['FEMALE', 'Female'],
  ['OTHERS', 'Others']
]

我正在使用 select2。我现在的代码如下：

$('.element-form#gender').select2({
    placeholder: "Gender",
    data: $.map(response.gender_choices, function(obj){
        obj.value = obj[0];
        obj.text = obj[1];
        return obj.value, obj.text;
      }
    ),
});

但是它将 obj.text 值添加到 option value 和 text 中。我想要的是将 obj.value 的值添加到 option value 和 obj.text 到 text 。另外，如何使 response["gender"] 选项选择值？

Answer 1

您可以使用 .val(yourgendertobeselected) 设置 select-box 的 selected 值。此外，您需要使用 .trigger('change') 将此更改更新为 select-框。然后，为了设置 value 和 text 使用 id & text 并在那里添加值，即：item[0],item[1],..etc.

演示代码 :

var response = {
  "gender": "Male",
  "gender_choices": [
    ['', '-----------------'],
    ['MALE', 'Male'],
    ['FEMALE', 'Female'],
    ['OTHERS', 'Others']
  ]
}

$('#gender').select2({
  placeholder: "Gender",
  data: $.map(response.gender_choices, function(item) {
    return {
      text: item[0], //option text(MALE,FEMALE..)
      id: item[1] //option value(male,female..)
    }
  }),
  width: "100px"
});
var selected = response.gender //gendere to set
$('#gender').val(selected).trigger('change'); //set gender selected

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="gender"></select>

使用 select2 使用来自多维数组的数据填充下拉列表

Populate dropdown with data from multidimensional array using select2

javascript

jquery

jquery-select2