CODEWITHSUNDEEP
javascriptjqueryhtmljquery-select2
codemastermind
codemastermind

Reputation: 344

How to add new options at last of select2 box?

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>

Upvotes: 1

Views: 1413

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 0

praveen kumar
praveen kumar

Reputation: 108

Try this, it will work

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

Upvotes: 0

jaygel adoptante
jaygel adoptante

Reputation: 63

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 :)

Upvotes: 1

Related Questions