CODEWITHSUNDEEP
javascriptjqueryhtmlmultiple-select
Ashish Bahl
Ashish Bahl

Reputation: 1492

unable to append option in multiple select

I have a multipleSelect, it is created dynamically using javascript and I am currently not able to append options in it.

Below is a Fiddle

Here is what I tried :

$(selectEventTypeAssetId).append($('<option value="1"').text("2")); 
$(selectEventTypeAssetId).html($('<option value="1"').text("2"));
$(selectEventTypeAssetId).html('<option value="1">234</option>');
$(selectEventTypeAssetId).append('<option value="1">234</option>');
$(selectEventTypeAssetId).text('<option value="1">234</option>');

None of these seem to help.

Any help would be appreciated.

Upvotes: 1

Views: 2129

Answers (3)

dip
dip

Reputation: 199

var newOption = new Option(key, value, true, false);
$("#selectEventTypeAssetId").append(newOption).trigger('change');

Upvotes: 0

Rahul
Rahul

Reputation: 18557

Try this,

$selectEventTypeAssetId = $("<select id='eventTypeSelect' class='form-control'>");
$selectEventTypeAssetId.html("<option value='1'>One</option>");
$(".alertTypeMultipleSelect").append($selectEventTypeAssetId);
$('select').multipleSelect({
  selectAll: false,
  width: "100%",
  filter: true,
  sort: true,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<div class="form-group">
  <label>Event Type:</label>
  <div class="alertTypeMultipleSelect"></div>
</div>

I have made some changes as per creation of select element dynamically.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337620

Your issue is because you need to append the new option element before you instantiate the multipleSelect plugin on the element, like this:

var $selectEventTypeAssetId = $('<select id="eventTypeSelect" class="form-control" />').appendTo('.alertTypeMultipleSelect');
$selectEventTypeAssetId.append('<option value="1">234</option>');

$('.alertTypeMultipleSelect').multipleSelect({
  placeholder: "Event Type",
  selectAll: false,
  width: "100%",
  filter: true,
  sort: true,
});

Updated fiddle

Upvotes: 1

Related Questions