Razor Views and Javascript : Append to multiSelect not working

Question

I am trying to append options to multiSelect. But the data is not reflected on UI. However, I can see the change in DOM through chrome dev tools.

@Html.DropDownListFor(model => model.ProductAndServices,
 Model.ProductsAndServices.Select(item => new SelectListItem
 {
     Value = item.Key.ToString(),
     Text = item.Value,
     Selected = item.Key == Model.ProductId,
 }), htmlAttributes: new { @class = "form-control input-fields-normal dropdown-ie multiSelect", @id = "productAndServicesDDL", @multiple = "multiple", @placeHolder = "Select Products and Services", style = "width:300px; height:300px;" })


  $(function () {
       $('#productAndServicesDDL').change(function () {
       
       }).multipleSelect({
           width: '100%'
       });
   });

What I am trying to do is:

var option = $('<option></option>')
    .attr('value', 199)
    .text('Any Service XYZ')
    .prop('selected', true);

Trying to append the options

$('#productAndServicesDDL').append(option).change()
      

When I try to use the following, the multiSelect element gets allignment issues

$('#productAndServicesDDL').multiselect('refresh');