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

Question

我发送两个属性的响应数据如下：response["gender"] = 'Male' #Or whatever is the value from databaseresponse["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值添加到选项 value和text。我想要的是将的值添加obj.value到option value和obj.texttext 。另外我怎样才能使response["gender"]选项选定值？

Answer 1

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