Html dynamic dropwon menu based on endsWith

Question

i am trying to write a dynamic dropdown menu, if the selected item in the first dropdown menu end with the letter s then the user can select all items in the second dropdown menu if it doesn't end buy the letter s he can only see the red color in the second menu. can anyone help me with this problem


 <select class=form-control name="items" id="items" data-child="itemschild">
                        <option selected disabled>Items</option>
                        <option value="Vips">Vips</option>
                        <option value="Superstars">superstars</option>
                        <option value="chief">chief</option>
                        <option value="employer">employer</option>
                        </select>

 <select class=form-control name="itemschild" id="itemchild">
                        <option data-group='SHOW' value='0'>-- Select --</option>                        
                        <option data-group="xxxxx" value="green">green</option>
                        <option data-group="xxxxxx" value="yellow">yellow</option>
                        <option data-group="xxxxxx" value="blue">blue</option>
                        <option data-group="xxxxx" value="red">red</option>
                    </select>

the use of non-native data-group looks like you have seen copy/pasted from the other dupes, no? [1](https://stackoverflow.com/questions/32405077/show-second-dropdown-options-based-on-first-dropdown-selection-jquery), [2](https://stackoverflow.com/questions/38079427/dynamic-select-dropdown-using-javascript) — Lawrence Cherone, Oct 31 '20 at 15:39

Sergio Rodriguez · Accepted Answer · 2020-10-31T21:23:07.807

A working copy:

<select class=form-control name="items" id="items" data child="itemschild">
            <option selected disabled>Items</option>
            <option value="Vips">Vips</option>
            <option value="Superstars">superstars</option>
            <option value="chief">chief</option>
            <option value="employer">employer</option>
        </select>

added IDs for each value

<select class=form-control name="itemschild" id="itemchild">
        <option data-group='SHOW' id="select" value='0'>-- Select --</option>
        <option data-group="xxxxx" id="green" value="green">green</option>
        <option data-group="xxxxxx" id="yellow" value="yellow">yellow</option>
        <option data-group="xxxxxx" id="blue" value="blue">blue</option>
        <option data-group="xxxxx" id="red" value="red">red</option>
    </select>

will make the selection based on "S" ending. Hides or makes all options visible.

<script>
      document.getElementById("items").addEventListener("click", function () {
         localString = document.getElementById("items").value
         if (localString.endsWith("s") != true) {
                 document.getElementById("red").hidden = true;
         }else{
            document.getElementById("red").hidden = false;
        }
      });
</script>

is there a way to reset the second dropdown menu, for example, if i chose "chief" i will not see red in the second dropdown menu but if then i chose "Vips", i don't see red niether, i have to refresh the page to be able to see red when i chose "Vips". is there no way to reset the value when i chose other item in the first dropdown menu — Tigui, Oct 31 '20 at 16:55
See the updated code. It works for me. Let me know if it works on your side. — Sergio Rodriguez, Oct 31 '20 at 21:21

KodeFor.Me · Answer 2 · 2020-10-31T15:48:26.277

My solution maybe it's more complicated than what you expected, but in the end, it does what you asked.

I write comments to explain what I do.

// Get the first select element.
var items = document.querySelector('#items');
// Get the second select element.
var itemsChild = document.querySelector('#itemchild');
// Create a list with all the values I could use in the second 
// select element as option tags.
var itemsChildData = [
  {
    value: 0,
    group: "SHOW",
    text: '-- Select --'
  },
  {
    value: 'green',
    group: "xxxxx",
    text: 'green'
  },
  {
    value: 'yellow',
    group: "xxxxxx",
    text: 'yellow'
  },
  {
    value: 'blue',
    group: "xxxxxx",
    text: 'blue'
  },
  {
    value: 'red',
    group: "xxxxx",
    text: 'red'
  }
];

// Listen for the change event in the first select element.
items.addEventListener(
  'change',
  function(event) {
    // Get the selected value from the first select element
    var value = event.target.value;
    // Get the last letter from the selected value
    var lastLetter = value.split('').pop();
    // Filter the list of the possible options for the second 
    // select element
    var filteredOptions = itemsChildData.filter(
        function(item) {
          // If the last character is s
          if ( 's' === lastLetter ) {
            // Return true, if the value is red or 0
            return -1 !== ['red', 0].indexOf( item.value );
          }

          // If the last character it is not s, return always true
          return true;
        }
    );
    
    // Get all the option tags from the second select element.
    var options = itemsChild.querySelectorAll('option');
    
    // If we found options
    if(options){
      // Itterate over the found options
      options.forEach(
        function(opt){ 
          // And remove them from the select element.
          opt.parentElement.removeChild(opt);
        }
      );
    }

    // Finally, iterate over the filtered options
    filteredOptions.forEach(
      function(newOption) {
          // Create a new option element
          var option = document.createElement('option');
          // Assign the value
          option.value = newOption.value;
          // Assign the text
          option.innerText = newOption.text;
          // Assign the data-group
          option.dataset.group = newOption.group;
          
          // And append the new option to the second select element.
          itemsChild.appendChild(option);
      }
    );
  }
);

<select class=form-control name="items" id="items" data-child="itemschild">
  <option selected disabled>Items</option>
  <option value="Vips">Vips</option>
  <option value="Superstars">superstars</option>
  <option value="chief">chief</option>
  <option value="employer">employer</option>
</select>

<select class=form-control name="itemschild" id="itemchild">
  <option data-group='SHOW' value='0'>-- Select --</option>                        
  <option data-group="xxxxx" value="green">green</option>
  <option data-group="xxxxxx" value="yellow">yellow</option>
  <option data-group="xxxxxx" value="blue">blue</option>
  <option data-group="xxxxx" value="red">red</option>
</select>

score 0 · Answer 3 · answered Oct 31 '20 at 15:43

This should work

document.querySelector('select[name="items"]').addEventListener('change', (e) => {
    document.querySelectorAll('select[name="itemschild"]) option').forEach(child => {
        if ( e.target.value.endsWith('s') ) {
            child.hidden = false;
        }
        else {
            child.hidden = child.value === 'red' ? false : true;    
        }
    });
});

Html dynamic dropwon menu based on endsWith

3 Answers3