Show dropdown value based on previous selection

Question

Is it possible for me to only display the related data on my second dropdown option when I click it on my first dropdown? I saw a similar question on stackoverflow, but I can't get it to work. The link is available here. It works when I copy and paste the code from the solution into my system. However, when I tried it on my code, it did not work.

Here's the flow: If DEPARTMENT is equals to Grade School then Grade & Section, dropdown will only show the Kindergarten to Grade 6 and then if DEPARTMENT is equals to Junior High School, dropdown will only shows Grade 7 to Grade 10 while if DEPARTMENT is equals to Senior High School, dropdown will only shows Grade 11 to Grade 12.

User interface:

Here's the code that I'm using..


  
    Department
    
      
        Options
        
      
    
  


  
    Grade & Section (for students only)
    
      
        Options

Here's the screenshot of my database.

user_4857150 · Answer

I went through the previous question you had and decided to simply use the example that was created in that question - but inside a codepen that works. https://codepen.io/Stoffe91/pen/YzYpwNO

HTML below:

Jquery below:

   $(document).ready(function () {
    $(document).on('change', '.category', function () {
      console.log('now');
        var val = $(this).val().toLowerCase();
        $('.operator option').hide();
        $('.operator option.'+val).show();
       $('.operator option.'+val+':first').attr('selected','selected').change();
    });
});

Check this one out. If you're having issues with it, please specify what part of it you're having issues with. Simply apply this on your current project.

user_943435 · Answer

A quick fix to a minor problem

The problem is a very minor one that is difficult to spot, but very easily fixed.

The department field values in your database are uppercase, but the script tries to match to lowercase. So there is never a match and script hides all of your grade options.

To fix this problem, change the following line of code as shown:

var val = $(this).val().toLowerCase(); // incorrect

change that to:

var val = $(this).val().toUpperCase(); // correct

Yes, it is that simple! You were very close, but just needed a little help spotting the bug. ;)

You can run the snippet below to see your code working.

Addendum: There's one other (optional) change you might want to make. Append a "removeAttr" to the following line. This will clear the previous selection when a different department is selected.

 $('.operator option').hide().removeAttr("selected");

$(document).ready(function () {
      $(document).on('change', '.category', function () {
          // var val = $(this).val().toLowerCase();  // <----- HERE IS THE PROBLEM
          var val = $(this).val().toUpperCase();
          $('.operator option').hide().removeAttr("selected");
          $('.operator option.'+val).show();
          $('.operator option.'+val+':first').attr('selected','selected').change();
      });
  });


  
    Department
    
      
        Options
        
      
    
  


  
    Grade & Section (for students only)
    
      
        Options

Show dropdown value based on previous selection

2 Answers