How to check if choice has been already selected for an element?

[utkrist]

I have following function which selected mutiple fields and makes it searchable.

function createSearchableTargetFields() {
    var targetFields = document.querySelectorAll("*[id*=target]");
    targetFields.forEach(field => {
         choices = new Choices(field, {
              searchResultLimit: 10000
          });
      })
 }

If I call this function twice like below, I'll get the following error in my console log

 createSearchableTargetFields();

  /** Some event listener will call this*/
  createSearchableTargetFields();

Error:

choices.min.js:11 Trying to initialise Choices on element already initialised
n @ choices.min.js:11
targetFields.forEach.field @ edit:338
createSearchableTargetFields @ edit:336
addButton.addEventListener @ edit:349

Is there a way to check if an Choice has already been selected for an element?

[utkrist]

I want following behaviour

function createSearchableTargetFields() {
    var targetFields = document.querySelectorAll("*[id*=target]");

    if choice not enabled for this field {
        targetFields.forEach(field => {
             choices = new Choices(field, {
                  searchResultLimit: 10000
              });
          })
    }
 }

[andylord56]

Looking for something similar to this anyone found a solution?

[rp3r]

I found a solution for this, but maybe not the best one - but so far it works.
After initializing the element, choicesJS adds the data-attribute data-active="true" to the element. As long as your element doesn't get disabled in some circumstances this should work.

$.each($(".choices-single"), function(key, value) {
  let element = $(this);

  if(element.data('choice') !== 'active') {
    const choices = new Choices(element.get(0), {
      ...Options
    });
  }
})

(I'm fetching this as an jQuery object for other purposes, but choicesJS can't handle the jQuery object and expects a DOM object)

[alvirbismonte]

I found a solution for this, but maybe not the best one - but so far it works. After initializing the element, choicesJS adds the data-attribute data-active="true" to the element. As long as your element doesn't get disabled in some circumstances this should work.

$.each($(".choices-single"), function(key, value) {
  let element = $(this);

  if(element.data('choice') !== 'active') {
    const choices = new Choices(element.get(0), {
      ...Options
    });
  }
})

(I'm fetching this as an jQuery object for other purposes, but choicesJS can't handle the jQuery object and expects a DOM object)

You saved me bro! Thank you.

[k89meera]

how can i disable it, if already initialising or how can i add or remove values into already initialised element.

[Hel5ing]

I found a solution for this, but maybe not the best one - but so far it works. After initializing the element, choicesJS adds the data-attribute data-active="true" to the element. As long as your element doesn't get disabled in some circumstances this should work.

$.each($(".choices-single"), function(key, value) {
  let element = $(this);

  if(element.data('choice') !== 'active') {
    const choices = new Choices(element.get(0), {
      ...Options
    });
  }
})

(I'm fetching this as an jQuery object for other purposes, but choicesJS can't handle the jQuery object and expects a DOM object)

Could you help me complete the ???? part please

`$.each($(".choices-single"), function(key, value) {
let element = $(this);

if(element.data('choice') !== 'active') {
const choices = new Choices(element.get(0), {
...Options
});
}
else
{
const choices = ????;
}

})`

[rp3r]

@Hel5ing what do you want to achieve in your ???? part?
The problem in this thread is, that you get an error if you initialize choicesJS twice.