CODEWITHSUNDEEP
javascriptjqueryjquery-select2
user001
user001

Reputation: 505

Populate dropdown with data from multidimensional array using select2

I'm sending the response data of two attributes as below:

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

I am using select2. My present code is as below:

$('.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;
      }
    ),
});

But it is adding the obj.text values to both option value and text. What I want is to add the value of obj.value to option value and obj.text to text. Also how can I make the response["gender"] option selected value?

Upvotes: 1

Views: 316

Answers (1)

Swati
Swati

Reputation: 28522

You can use .val(yourgendertobeselected) to set selected value of select-box .Also , you need to use .trigger('change') to update this change to select-box . Then, for setting value and text use id & text and add value there i.e : item[0],item[1],..etc.

Demo Code :

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>

Upvotes: 1

Related Questions