How to add new options at last of select2 box?

Question

I am trying to add select2 options at last of select box every time, When I am choosing a new option from select2 options Its adding sometimes 1st position, sometimes last or middle of others options.

Like first I selected A. Now I want to select B and I want B after A in box. i.e A|B..But Its not happenings all time.

$('#destination').select2({allowClose: true});

.select2-container { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>

<select id="destination" class="destination form-control" multiple="multiple">
  <option value="kol">kolkata</option>
  <option value="ban">Bangalore</option>
  <option value="del">Delhi</option>
</select>

can you show the code what have you tried so question can be more specific — tech_geek, Feb 16 '17 at 07:33

score 1 · Answer 1 · answered Feb 16 '17 at 07:47

Use append.

$("#add_option_b").on("click", function() {
  $("#select_id").append("<option value='B'>B</option>")
});

$("#add_option_c").on("click", function() {
  $("#select_id").append("<option value='C'>C</option>")
});

$("#add_option_d").on("click", function() {
  $("#select_id").append("<option value='D'>D</option>")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="select_id">
  <option value"A">A</select>
</select>
<br />
<br />
<button id="add_option_b">Add option B</button>
<br />
<br />
<button id="add_option_c">Add option C</button>
<br />
<br />
<button id="add_option_d">Add option D</button>

Hope that helps :)

select should be multiple select .I mean select2 and all the options should be arranged. If I have 3 option in a select. If I select all these options ..It should be like [A,B,C] not like [C,A,B] in select box. — Samiul, Feb 16 '17 at 09:17

score 0 · Answer 2 · answered Feb 16 '17 at 12:39

0

Try this, it will work

$(element).select2('data').map(function (obj) { return obj.id; })

answered Feb 16 '17 at 12:39

praveen kumar

96
6

score 0 · Answer 3 · answered Feb 16 '17 at 15:20

Working fiddle.

You should use index of the option's instead, check the example bellow using the jQuery method .index().

Hope this helps.

$('#destination').select2({allowClose: true});
$('#destination').on('change', function(){
  var selected_values = [],
      arr = [];

  if( $(this).val().length )
  {
    $.each($(this).val(), function(i,v){
      arr[ $('[value="'+v+'"]').index() ] = v;
    });
    arr.map(function(x){ selected_values.push(x); })

    console.log( selected_values );
  }
});

.select2-container { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script>

<select id="destination" class="destination form-control" multiple="multiple">
  <option value="kol" >kolkata</option>
  <option value="ban" >Bangalore</option>
  <option value="del" >Delhi</option>
</select>

Hi #Zakaria Achark I am getting one issue , When I added one option that is not removing from the select list. And I cant remove all options from select box ,When I removing getting -- “Uncaught TypeError: cannot read property 'length' of null” in jQuery . — Samiul, Feb 17 '17 at 05:37
You're welcome, glad i could helps. please update the jsFiddle in my question with the issue you get. and post it here. — Zakaria Acharki, Feb 17 '17 at 09:30
http://stackoverflow.com/questions/42300999/iterate-over-javascript-object-and-remove-array It's not a duplicate. Review it. — kind user, Feb 17 '17 at 15:09

How to add new options at last of select2 box?

3 Answers3