Changing data-attribute on select2

Question

I working on an older legacy system using select2 3.5.2.

It's using the older hidden field method, and it currently passes data like so:

<input class="select2" data-url="/mapscrSearch/filterdata" data-parent="3" data-model="VMapscreenCategories" data-tags="1" data-searchterm="name" data-showitem="name" data-hiddenfield=".opcode_filters" data-allowuserinput="" data-enabled="1" type="text" value="" name="opcode_id" id="opcode_id" tabindex="-1" style="display: none;">

Right now, I have a small jquery function that changes the data-parent on the fly, and pulls in the correct data depending on the parent id; This works if I set data-parent manually, but when changing the data-parent via jquery it doesn't update the select2 component.

For example, I currently have:

$(document).ready(function(){
   var opCodeFamily = $('#category_parent');
   var opCodeParentId = $('#opcode_parent_id');
   var opCodeDataUrl = $('#opcode_id');

   // Set default
  $(opCodeParentId).val($(opCodeFamily).val());
  $(opCodeDataUrl).attr('data-parent', opCodeParentId.val());

  // Change the value from parent select
  $(opCodeFamily).change(function(){
  $(opCodeParentId).val($(opCodeFamily).val());
  $(opCodeDataUrl).attr('data-parent', opCodeParentId.val()).trigger("change");
       console.log('data-parent set to: ' + opCodeParentId.val() + ', select2 passing: ' + opCodeDataUrl.data('parent')); 
  }).trigger("change")

});

I can see it changing the data-parent in the console and inspector, but select2 is still passing the original value. I've looked at trigger, but this doesn't seem to do anything. Is there something I'm missing?

Changing data-attribute on select2

0 Answers0