时间戳

首页 > 解决方案 > 使用 select2 使用多维数组中的数据填充下拉列表

javascript - 使用 select2 使用多维数组中的数据填充下拉列表

问题描述

我正在发送两个属性的响应数据，如下所示：

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值添加到选项 值和text. 我想要的是添加obj.valueto option value和obj.textto text的值。另外，我怎样才能使response["gender"]选项选择值？

标签： javascriptjqueryjquery-select2

解决方案

您可以使用.val(yourgendertobeselected)设置选择框的选定值。此外，您需要使用.trigger('change')更新此更改为选择框。然后，用于设置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>

推荐阅读