Javascript 基于endsWith的Html动态dropwon菜单

我正在尝试编写一个动态下拉菜单，如果第一个下拉菜单中的所选项目以字母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>
                       
                   

工作副本：

<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元素。 var items=document.querySelector'items'； //获取第二个select元素。 var itemsChild=document.querySelector'itemchild'； //创建一个列表，列出第二个示例中可以使用的所有值 //选择元素作为选项标记。 var itemsChildData=[ { 值：0， 组别:秀,， 文本：'-选择-' }, { 值：“绿色”， 组别:xxxxx， 文字：“绿色” }, { 值：“黄色”， 组别：xxxxxx， 文字：“黄色” }, { 值：“蓝色”， 组别：xxxxxx， 文字：“蓝色” }, { 值：“红色”， 组别:xxxxx， 文字：“红色” } ]; //在第一个select元素中侦听更改事件。 items.addEventListener "变",， 功能事件{ //从第一个选择元素中获取选定值 var值=event.target.value； //从所选值中获取最后一个字母 var lastLetter=value.split.pop； //筛选第二个选项的可能选项列表 //选择元素 var filteredOptions=itemsChildData.filter 功能项{ //如果最后一个字符是s 如果's'==最后一个字母{ //如果值为红色或0，则返回true 返回-1！=['red'，0].indexOf item.value； } //如果最后一个字符不是s，则始终返回true 返回true； } ; //从第二个select元素获取所有选项标记。 var options=itemsChild.querySelectorAll'option'； //如果我们找到了选择 如果选项{ //对已找到的选项进行评级 options.forEach 函数opt{ //并将其从选择元素中删除。 opt.parentElement.removeChildopt； } ; } //最后，迭代过滤的选项 filteredOptions.forEach 函数新选项{ //创建一个新的选项元素 var option=document.createElement'option'； //赋值 option.value=newOption.value； //分配文本 option.innerText=newOption.text； //分配数据组 option.dataset.group=newOption.group； //并将新选项附加到第二个select元素。 itemsChild.appendChildoption； } ; } ; 项目 贵宾 超级明星 首领 雇用者 -选择- 绿色 黄的 蓝色 红色 这应该行得通

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

---

非本机数据组的使用看起来像是从其他副本复制/粘贴的，不是吗，有没有办法重置第二个下拉菜单，例如，如果我选择了chief，我不会在第二个下拉菜单中看到红色，但是如果我选择了VIP，我不会看到红色niether，我必须刷新页面才能在选择VIP时看到红色。当我在第一个下拉菜单中选择其他项时，是否无法重置值使用更新的代码。它对我有用。让我知道它是否对你有效。

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

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