Set multiple options in Chosen from JS

Question

I am using chosen.js for my multiselect dropdown. I want to set multiple true or false from JS, but I can't set it. How can I do that?

HTML :

<select name="test" id="id">
   <option value="">-- Select an option --</option>
   <option class="item" name="test" value="21" data-url="URL">A</option>
   <option class="item" name="test" value="22" data-url="URL">B</option>
   <option class="item" name="test" value="23" data-url="URL">C</option>
</select>

JS :

require([
  'jquery',
  'chosen'
], function($, chosen) {
  $('#id').chosen({
    width: '100%',
    multiple: true,
    //multiple: 'multiple', also tried this
    placeholder_text: "Select Options"
  });
})

Note: I don't want to set it in the HTML code directly.

UPDATE (Output) :

Answer 1

It's not possible to change the type of selection in the Chosen library itself. It's set using the multiple attribute on the HTML select element when the library is instantiated.

As you state that you don't want to, or cannot, amend the HTML:

Note that I don't want to set it in the HTML code directly.

Then you could instead set the multiple attribute in JS before you define the Chosen library. You can also remove the first 'Select an option' item too, as it's not relevant to a multiple select.

var $select = $('#id').attr('multiple', true);
$select.find('option:first').remove();
$select.chosen({
  width: '100%',
  placeholder_text: "Select Options"
});