[Feature Request] Sync nice-select2 value with source control value, when the source value changed

[triawarman]

There are conditions when changing control value are not based on user interaction, but based on automation code, currently select2 has no methode that can sync the select2 selected value with source value when the source value is changed.

i hope you guys make the synchronization method/function.

NiceSelect.prototype.bindEvent = function() {
  var $this = this;
  
  //INFO: not tested with multiple value, and im sure this one is not the best solution
  this.el.addEventListener("change", function() {
    let sourceVal = this.value;
    if(sourceVal !== $this.selectedOptions[0].data.value) {
      let selectedItem;
      $this.options.forEach(function (item) {
        removeClass(item.element, "selected");
        if(sourceVal == item.data.value) {
          selectedItem = item;
        }
      });
      
      $this.selectedOptions.forEach(function (item) {
        removeClass(item.element, "selected");
      });
      
      selectedItem.element.classList.add("selected");
      $this.selectedOptions = [selectedItem];
      
      $this._renderSelectedItems();
      $this.updateSelectValue();
    }
  });
  
 //nice-select2 codes
 //....

``

[adkinsrs]

I think a feature like this would be very nice. I had to write a bunch of NiceSelect.prototype.update lines in my code to handle cases where the source value would change in the original select box, such as when the user chooses to load from a preexisting configuration file of data choices.

[ln8711]

I found a workarround: get all the option of orignal element and set the attribute selected accordingly and then call the update() function

            let originalSelectElement = document.getElementById('originalSelectElementId');
            originalSelectElement.value = valueToSelect;  /* the value to update */
            
            /* loop the options and set selected or remove it */
            for (let index = 0; index < originalSelectElement.options.length; index++) {
                let option = originalSelectElement.options[index];

                if (option.value == valueToSelect) {
                    option.selected = true;
                    option.setAttribute("selected", "selected");
                } else {
                    option.selected = false;
                    option.removeAttribute("selected");
                }
            }
            
           /* call update to nice select element */
           niceSelectElement.update();

[EyMaddis]

this supports multi-selects as well :)

const binding = NiceSelect.bind(select)
select.addEventListener("change", () => {
  const selected = Array.from(select.selectedOptions);

  for (const option of Array.from(select.options)) {
    if (selected.includes(option)) {
      option.selected = true;
      option.setAttribute("selected", "selected");
    } else {
      option.selected = false;
      option.removeAttribute("selected");
    }
  }
  binding.update();
});

However, this does not work completely. This is create for a one-time thing, but afterwards the manual usage via the mouse is broken in nice-select2 as it works on an old state (not sure why).

I've changed my code that updates the select programmatically, to fake a click on the NiceSelect option instead. Pretty hacky.

const found = niceSelectInstances.find((ns) => ns.el === element);
const options = Array.from(found.dropdown.querySelectorAll(".option")); // class from the internals
const option = options.find(
  (o) => o.dataset.value === selectedOptionsValue // dataset usage from nice-selects internals
);
// fake click to have the nice select update properly
option.dispatchEvent(new MouseEvent("click", { bubbles: true }));