下拉显示乱序

Question

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

实际行为 从下拉列表中选择“常规”后不会执行$(".dropdown").removeClass("no-display"); 只有当我选择第二个选项“基于项目”时才会这样做。当我单击project based 时，第二个下拉菜单显示的是mother hub，它应该是rider category。为了让我的第二个下拉列表使用regular 选项删除$(".dropdown").removeClass("no-display");，我可以修复什么并添加到我的脚本中？

脚本

$('#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");
    });

实际下拉菜单

Answer 1

我认为问题在于您的this。如果没有任何 html js 和 css 示例，很难为您提供帮助。但看起来你应该使用像 $(this) 这样的 jQuery 选择器并使用 val() 函数调用值：$(this).val()。其他人也一样，但在 .map() 中你定义了this.text。它应该怎么做？或者它应该调用哪个值？来自$('#rider_type').on('change', function(){}？然后使用$(this).text()。如果从地图。然后使用例如：

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

什么是集线器？大批？目的？ 你能准确地说出你的问题吗？有更好的示例代码？在 JsFiddle 中？