dropdown showing out of order

Question

I added a class that hides the 2nd and 3rd dropdown unless there's a click or change in the 1st selection.

Actual Behavior Upon selecting "regular" from the dropdown doesnt execute $(".dropdown").removeClass("no-display"); It only does when I select the 2nd option "project based". When I click project based the 2nd dropdown to show is the mother hub which is supposed to be rider category first. What can i fix and add to my script in order for my 2nd dropdown to remove $(".dropdown").removeClass("no-display"); with the regular option?

Script

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

Actual Dropdown

score 0 · Answer 1 · answered Sep 10 '20 at 20:53

0

I think problem is with your this. Its hard to help you without any html js and css example. But it looks like you should use jQuery selector like $(this) and call value with val() functio: $(this).val(). Same for others but inside .map() you define this.text. What should it do? Or whitch value should it call? It is from $('#rider_type').on('change', function(){}? Then use $(this).text(). If from map. then use for example:

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

What is hub? Array? Object? Could you precise your question? With better example code? In JsFiddle?

answered Sep 10 '20 at 20:53

Nienormalny_

460
3
14

You should just do `this.hidden = true;` if `this` is an `HTMLElement`. See [When to use setAttribute vs .attribute= in JavaScript?](https://stackoverflow.com/q/3919291/215552) – Heretic Monkey Sep 10 '20 at 21:03
Hub is an object sorry for the confusion. I cant give you a sample on jsfiddle because i dont think it will work. This work was built using laravel it might not give the supposed to be output i guess – Joshua Sep 10 '20 at 22:09

dropdown showing out of order

1 Answers1