JQuery Chosen set maximum number of options to select on change event

Question

I am using the Jquery Chosen plugin and I want to dynamically set the maximum number of options the user can select on change event of another chosen select. Note: milestone select control is a multiselect

Here is my code,

const $milestone = $('#mainmodallg .modal-body form select[name="milestone"]');
$('#mainmodallg .modal-body form select[name="item_code"]').change( function () {
   $milestone.chosen({ max_selected_options: 1 });
   $milestone.trigger("chosen:updated");
});

Right now it's not changing it. What am I missing?

Answer 1

You need to get instance of chosen select and then using that update your max_selected_options value.

Demo Code :

$(".chosen-select").chosen({
  width: "95%"
});
const $milestone = $('select[name="milestone"]');
$('select[name="item_code"]').change(function() {
  $milestone.data('chosen').max_selected_options = 1; //get instance
  $milestone.trigger("chosen:updated"); //update
  //or
  //destroy plugin & re-intialize
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>
<select data-placeholder="Choose..." class="chosen-select" name="item_code">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<select data-placeholder="Choose..." class="chosen-select" multiple="" name="milestone">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>