kieron kieron - 14 days ago 7
HTML Question

jquery programmatically reselecting multselect does not reselect

I am trying to select all options in a multselect with a tickbox using jquery 2.1.1.

This works fine on the first tickbox select and deselect, however subsequent selects of the tickbox do not highlight the multiselect options and the change event writing to console displays null for the values.

Below is a working copy that can be cut and paste to a file to illustrate the problem - naturally I've searched stack overflow for this issue but can't find it listed.

Any idea why a reselecting the tickbox adds 'selected = "selected" but does not highlight the options and results in 'null' for the values in the console?

I appreciate any help.



jQuery(document).ready(function($) {

jQuery(function() {
jQuery('#bundle-option-5').change(function() {
console.log(jQuery(this).val());
});
});
});

function updateBundleItems(bundleOptionId) {

if (jQuery('input#bundle_tick_' + bundleOptionId).is(':checked')) {
//jQuery('.bundle_item_'+bundleOptionId).addAttr("selected");
jQuery('.bundle_item_' + bundleOptionId).attr('selected', true);
} else {
// jQuery('.bundle_item_'+bundleOptionId).removeAttr("selected");
jQuery('.bundle_item_' + bundleOptionId).attr('selected', false);
}

jQuery('#bundle-option-' + bundleOptionId).trigger('change');
}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="input-box">
<input class="checkbox" onclick="updateBundleItems(5)" id="bundle_tick_5" type="checkbox">
<select multiple="multiple" size="5" id="bundle-option-5">
<option value="">None</option>
<option class="bundle_item_5" value="11">first one</option>
<option class="bundle_item_5" value="12">second one</option>
<option class="bundle_item_5" value="13">third one</option>
</select>
</div>




Answer

You should use the prop function instead of the attr one.

Here is the change in your code:

jQuery(document).ready(function($) {
  jQuery(function() {
    jQuery('#bundle-option-5').change(function() {
      console.log(jQuery(this).val());
    });
  });
});

function updateBundleItems(bundleOptionId) {

  if (jQuery('input#bundle_tick_'+bundleOptionId).is(':checked')) {
    //jQuery('.bundle_item_'+bundleOptionId).addAttr("selected");
    jQuery('.bundle_item_'+bundleOptionId).prop('selected', true);
  }
  else {
    //        jQuery('.bundle_item_'+bundleOptionId).removeAttr("selected");
    jQuery('.bundle_item_'+bundleOptionId).prop('selected', false);
  }

  jQuery('#bundle-option-'+bundleOptionId).trigger('change');
}
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="input-box">
  <input class="checkbox" onclick="updateBundleItems(5)" id="bundle_tick_5" type="checkbox">
  <select multiple="multiple" size="5" id="bundle-option-5">
    <option value="">None</option>
    <option class="bundle_item_5" value="11">first one</option>
    <option class="bundle_item_5" value="12">second one</option>
    <option class="bundle_item_5" value="13">third one</option>
  </select>
</div>