moxy

Thank you so much. This put me on the right track. Ended up not being too bad. I used javascript on the website to futz with the list directly after it was created. Probably not the most ideal way to do this.

So what this does is shortly after the page loads runs through each option in the settings.userInputs.artStyle.options list and looks to see if nsfw = true. If so it adds a data-nsfw tag to the option entry itself on the html side. It then stores the entire option list in artStyleDropdown.

When the checkbox is clicked the toggleNSFW function runs. If the check box is ticked it displays all the entries that were initially saved when the page was loaded. If it's unticked it'll filter out any of the options with data-nsfw set to true then assigns the resulting list back to the dropdown.

For the newbies like me in the html side below the data-name="artStyle"] is finding the drop down control related to the artStyle list. This should generally match the name of the list.

Here's the javascript I used:

<span>
  <input type="checkbox" checked oninput="toggleNSFW(this);"/> Show NSFW options.
</span>

<script>
let allArtStyles = [];
function toggleNSFW(checkbox) {
  const artStyleDropdown = document.querySelector('select[data-name="artStyle"]');
  if (!artStyleDropdown) return;

  // Save current selection so we don't lose it if it's safe
  const currentVal = artStyleDropdown.value;

  // Clear the dropdown completely
  artStyleDropdown.innerHTML = "";

  // Re-add only the allowed options
  allArtStyles.forEach(option => {
    const isNSFW = option.getAttribute('data-nsfw') === 'true';
    if (checkbox.checked || !isNSFW) {
      artStyleDropdown.add(option);
    }
  });

  //Try to restore the previous selection
  artStyleDropdown.value = currentVal;
  
  // If the previous selection was NSFW and is now gone, default to index 0
  if (artStyleDropdown.selectedIndex === -1) {
    artStyleDropdown.selectedIndex = 0;
  }
}

setTimeout(() => {

  var artStyleDropdown = document.querySelector('select[data-name="artStyle"]');

  if (artStyleDropdown) {
    const styles = settings.userInputs.artStyle.options;
    Array.from(artStyleDropdown).forEach(option => {
      const styleName = option.textContent.trim();
      const isNSFW = styles[styleName]?.nsfw === true;
      // Set the attribute based on the boolean check
      option.setAttribute('data-nsfw', isNSFW);
    });
    // Save a copy of all options before we start removing them
    allArtStyles = Array.from(artStyleDropdown.options);
  } 
}, 100);

I added an entry in the list to tag which entries to show and hide. Here it's the nsfw = true/false. In this example I'm labeling anime as nsfw.

    artStyle
      label = 🎨Art Style
      type = select
      width = 25vw
      height = 5vh
      remember = true
      options
        //https://perchance.org/t2i-styles#edit
        Default
          prompt = [if (input.description != "" || null) {input.description} else {""}]
          negative = [if (input.negative != "" || null) {input.negative} else {""}]
        No style
          prompt = [input.description]
          negative =[input.negative]
        Cartoon
          prompt = [input.description], cartoon-style art, superb bold linework, nice colors and composition
          negative = [input.negative], bad art, boring art, hilariously bad drawings, bad 3D render, 
        Anime   
          nsfw = true
          prompt = [input.description], intricate detail, hyper-anime, (anime), (masterpiece)
          negative = [input.negative], photography, low-quality, deformed, (text), blurry

Thank you so much this helped a lot.

Is there a way to modify the lists dynamically? Let's say based on the value of a checkbox?

For example I have a checkbox to check or uncheck if the user wants to filter shirt options from the clothing dropdown. I've got something like this where I check the value of shirtOptions.checked and try to add an entry to the list if it's true and not if it's false.

  clothes
      label = Clothes?
      type = select
      options
        Default = [{""}]
        [if (shirtOptions.checked) {"T-Shirts = (T-shirt), (Tee-Sirt)"} else {""}]
        Bicycle rider = (bicycle outfit), (cycling jersey), (bike shorts)

in the HTML part of course I have:

<input type="checkbox" id="shirtOptions" checked oninput="update()"/>

However, this is not creating an error in the source but does display "Syntax Error" in the drop down list.