Javascript 显示故障的下拉列表

我添加了一个类，它隐藏第二个和第三个下拉列表，除非第一个选择中有单击或更改

实际行为 从下拉列表中选择“常规”后，不会执行

$（“.dropdown”）。removeClass（“无显示”）
只有当我选择第二个选项“基于项目”时，它才起作用。当我点击
基于项目的
时，第二个下拉菜单显示的是
主枢纽
，它应该是
车手类别
。为了让我的第二个下拉菜单删除
$（“.dropdown”）.removeClass（“无显示”），我可以修复什么并添加到脚本中常规
选项进行编码>

脚本

$('#rider_type').on('change', function(){
      if (this.value == 'PROJECT_BASED') {
          $('#rider_category').attr("disabled", "disabled");
          $('#hub')[0].selectedIndex = 0;
          hub.map(function() {
            if(this.text == 'ONDEMAND'){
              this.setAttribute("hidden", "hidden");
            }
          });
          $('#hub-selection').css('display', 'block');
      }
       else {
        $('#hub-selection').css('display', 'block');
        $('#rider_category').removeAttr("disabled");
        $('#hub')[0].selectedIndex = 0;
          hub.map(function(item,index) {
            if(this.text == 'ONDEMAND'){
              this.removeAttribute("hidden");
            }
          });
      }
      $('#rider_category')[0].selectedIndex = 0;
      category.map(function() {
        if(this.text == 'ONDEMAND'){
          this.setAttribute('hidden', 'hidden');
        }
      });
    });

    $('#hub').on('change', function(){
      $(".dropdown").removeClass("no-display");
      if (this.options[this.selectedIndex].text == 'ONDEMAND') {
        $('#rider_category').attr("disabled", "disabled");
        $('#rider_category').val("ONDEMAND");
        category.map(function(index) {
          if(this.text == 'ONDEMAND'){
            this.removeAttribute("hidden");
            $('#rider_category')[0].selectedIndex = index;
          }
        });
        riderType.map(function() {
          if(this.text == 'PROJECT_BASED'){
            this.setAttribute('hidden', 'hidden');
          }
        });
      } else {
        riderType.map(function() {
          if(this.text == 'PROJECT_BASED'){
            this.removeAttribute('hidden');
          }
        });

        
        const rider_type = $("#rider_type").children("option:selected").val();
        // disable category dropdown and make 'SCHEDULED' category option default
        // $('#rider_category').attr("style", "pointer-events: none;");
        if (rider_type !== 'PROJECT_BASED') {
          $('#rider_category').attr("disabled", false);
        } else {
          
        }
        var categoryDropdown = document.getElementById("rider_category");
        var option = document.createElement("option");
        option.text = "SCHEDULED";
        option.value = "SCHEDULED";

        if ($("#rider_category option:contains('SCHEDULED')").length < 0) {
          categoryDropdown.add(option, categoryDropdown[1]);
        }

        $('#rider_category').val("SCHEDULED");
      }
    });

    $('#rider_category').on('change', function(){
      if (this.options[this.selectedIndex].text == 'ONDEMAND') {
        hub.map(function(index) {
          if(this.text == 'ONDEMAND'){
            $('#hub')[0].selectedIndex = index;
          }
        });
      }
      if (this.options[this.selectedIndex].text === 'SAME DAY PICKUP') {
        $('#hub-selection').css('display', 'none');
        $('#rider_type')[0].selectedIndex = 1;
      } else {
        $('#hub-selection').css('display', 'block');
      }
      $(".dropdown").removeClass("no-display");
    });

$（“#骑手类型”）。在（'change'，function（）上{
if（this.value==“基于项目的”）{
$（'骑手'类别'）.attr（“禁用”，“禁用”）；
$（'#hub'）[0].selectedIndex=0；
map（函数（）{
if（this.text==“ONDEMAND”）{
此.setAttribute（“隐藏”、“隐藏”）；
}
});
$（“#中心选择”）.css（'display'，'block'）；
}
否则{
$（“#中心选择”）.css（'display'，'block'）；
$（“#骑手#类别”）。移除骑手（“禁用”）；
$（'#hub'）[0].selectedIndex=0；
hub.map（功能（项目、索引）{
if（this.text==“ONDEMAND”）{
此。删除属性（“隐藏”）；
}
});
}
$（“#骑手_分类”）[0]。选择的索引=0；
category.map（函数（）{
if（this.text==“ONDEMAND”）{
this.setAttribute（'hidden'，'hidden'）；
}
});
});
$（'#hub'）。在（'change'，function（）上{
$（“.dropdown”）.removeClass（“无显示”）；
if（this.options[this.selectedIndex].text='ONDEMAND'）{
$（'骑手'类别'）.attr（“禁用”，“禁用”）；
$（'骑手'类别'）.val（“ONDEMAND”）；
category.map（函数（索引）{
if（this.text==“ONDEMAND”）{
此。删除属性（“隐藏”）；
$（“#骑手_分类”）[0]。选择的索引=索引；
}
});
map（函数（）{
if（this.text==“基于项目的”）{
this.setAttribute（'hidden'，'hidden'）；
}
});
}否则{
map（函数（）{
if（this.text==“基于项目的”）{
此.removeAttribute（“隐藏”）；
}
});
常量骑手类型=$（“#骑手类型”）.children（“选项：已选定”）.val（）；
//禁用类别下拉列表，并将“计划”类别选项设为默认值
//$（“#rider_category”）.attr（“样式”，“指针事件：无；”）；
如果（骑手类型！==“基于项目”）{
$（“#骑手类别”）.attr（“禁用”，false）；
}否则{
}
var categorhydropdown=document.getElementById（“附加类别”）；
var option=document.createElement（“选项”）；
option.text=“计划”；
option.value=“计划”；
if（$（“#骑手_类别选项：包含（'SCHEDULED'）”）。长度<0）{
添加（选项，categorhydropdown[1]）；
}
$（'骑手'类别'）.val（“预定”）；
}
});
$（“#骑手_类别”）。在（'change'，function（）上{
if（this.options[this.selectedIndex].text='ONDEMAND'）{
hub.map（函数（索引）{
if（this.text==“ONDEMAND”）{
$（'#hub'）[0].selectedIndex=index；
}
});
}
if（this.options[this.selectedIndex].text==‘当天取货’）{
$（“#中心选择”）.css（'display'，'none'）；
$（“#骑手类型”）[0]；
}否则{
$（“#中心选择”）.css（'display'，'block'）；
}
$（“.dropdown”）.removeClass（“无显示”）；
});

实际下拉列表
我想问题出在你的
这个
上。如果没有任何html js和css示例，很难为您提供帮助。但是看起来您应该使用jQuery选择器，比如$（this），并使用val（）函数调用value:
$（this）.val（）
。其他人也一样，但在.map（）中定义
此.text
。它应该做什么？或者它应该调用什么值？它来自
$（“#骑手类型”）。在（'change'，function（）{}
？上，然后使用
$（this）.text（）
。如果来自地图。然后使用例如：

hub.map(function(val, index) {
  if(val.text == 'ONDEMAND'){
     this.setAttribute("hidden", "hidden");
  }
});

什么是集线器？阵列？对象？
你能用更好的示例代码精确地回答你的问题吗？在JSFIDLE中？
你应该只做
this.hidden=true；
如果
这是一个
HTMLElement
。请看Hub是一个对象，很抱歉混淆了。我不能给你一个JSFIDLE的示例，因为我认为它不会工作。这项工作是使用laravel构建的，它可能不会给出我猜应该是输出