基于endsWith的html动态下拉菜单

Question

我正在尝试编写一个动态下拉菜单，如果第一个下拉菜单中的选定项目以字母 s 结尾，那么用户可以选择第二个下拉菜单中的所有项目，如果它没有以字母 s 结尾只能在第二个菜单中看到红色。 谁能帮我解决这个问题

 <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>
                       
                   

Answer 1

工作副本：

<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>
        

为每个值添加了 ID

<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>

将根据“S”结尾进行选择。隐藏或显示所有选项。

<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>

Answer 2

这应该可以工作

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;    
        }
    });
});

Answer 3

我的解决方案可能比您预期的要复杂，但最终，它会按照您的要求进行。

我写 cmets 来解释我的工作。

// 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>