3 Dependent Dropdown Lists on Javascript

To preface, I'm super new to coding in general. This is also the first web app I'm developing on Google App Script.

I have retrofitted some code that I found to do a dependent drop-down to 2 levels (once you select the "country", you get a corresponding list of "states").

Now I'm trying to make it so that once a "state" is selected, you get a corresponding list of "criteria". I don't care for what country is selected in this case, because each list of criteria is unique to a state. I'm using populateCriteria() in "page-js" for this purpose. this is the function that I'm struggling to work ou...t

Somethings I know:

I know that on the first two drop downs, indices were used to match arrays... to search by terms, I need to use Object() (e.g. if I choose the state "Energy", find the criteria list denoted as "Energy"?) (thank you @Dustin Michaels)
I am using materialcss. I found this to be a hindrance when it comes to having my criteria dropdown from updating
I can't do a just search-and-match on criteria because some states have multiple options for their criterias

Thank you.

page.html

 <html>

    <body>
     <div class="row">


       <div class="col s6">
          <label>Category</label>    
          <select id="country" name ="country"></select> 
       </div>

       <div class="col s6">
        <label>Standard</label> 
        <select name ="state" id ="state" class="state"></select>
       </div>     

       <div class="col s12">
        <label>Criteria</label> 
        <select name ="criteria" id ="criteria" class="criteria"></select>  
       </div>   
    </div>

    <?!= include("page-js"); ?>

   </div> 
 </body>
</html>

page-js

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"</script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>    
   <script src="https://gumroad.com/js/gumroad.js"></script>

   <script>
     //Country= Cateogry, State=Standards     
      var country_arr = new Array("EOHS", "Quality", "FP&R");

     // States
     var s_a = new Array();
  s_a[0]="";
  s_a[1]="Energy|Personal Protective Equipment|Walking, Working Surfaces and Fall Protection|Machine Guarding|Electrical Safety|Minimum Safe Behaviors";
  s_a[2]="Documentation|Process Validation and Control|Equipment|Calibration|Product Conformance|Traceability|Documentation|Good Manufacturing Practice";
  s_a[3]="Sort Out (Organize)|Set in Order (Set Limits)|Shine (Cleanliness)|Standardize|Sustain";
  // <!-- -->

  //Criteria-- this should correspond to the standard selected
  var s_b = new Object();
  s_b['']="";
  s_b['Energy']="Energy Walk Abouts. Are there any air leaks, running equipment / with line down, air being used to control bottles, or any other opportunity to reduce energy consumption?";
  s_b['Personal Protective Equipment']="Are the personnel wearing the correct PPE? Safety glasses/shoes/hearing protection.  Is fall protection being utilized when working greater than 4ft above ground?  Scissor lift harness worn and tied off if feet leave floor, JLG harness worn and tied to anchor point at all times - 100% tie-off.";
  s_b['Walking, Working Surfaces and Fall Protection']="Are walking / working surfaces  free of debris and liquid?  No spills, wood, banding, preforms, etc. or other slip or trip hazards.";
  s_b['Machine Guarding']="Is there any missing or broken machine guards?  Are the guards securely in place?  No bolts /screws missing.  Is there evidence or did you witness bypassing or disabling machine guards or interlocks?";
  s_b['Electrical Safety']="Are electrical panels blocked or left open?  Are items left on panels?  Rags, tools, cleaning supplies, etc.";
  s_b['Minimum Safe Behaviors']="Did you witness personnel clearing a jam without stopping the machine?|Are LOTO locks located in close proximity to the machine?  Are employees performing maintenance without locking out the machine?|Are forklift seatbelts being used properly?  Are forklifts traveling at safe speed? Are forklifts traveling with empty forks less than 4 inches off ground?|Are ladders being used and stored properly? Maintain 3 points of contact, not standing at the top of a step ladder, ladder feet have rubber shoes.|Are machines/equipment/pipes, properly labeled?|Are product containers being used for purposes other than finished product?";
  // <!-- -->



  function populateCriterias(stateElementId ){

      var selectedStateIndex = document.getElementsById(stateElementId).selectedValue;

      var criteriaElement = {};

      criteriaElement.length=0; // Fixed by Julian Woods
      criteriaElement.options[0] = new Option('Choose the criteria','');
      criteriaElement.selectedIndex = 0;

      var criteria_arr = s_b[selectedStateIndex].split("|");


      for (var i=0; i<criteria_arr.length; i++) {
          criteriaElement.options[criteriaElement.length] = new Option(criteria_arr[i],criteria_arr[i]);
      }


    $("#" + stateElementId).formSelect();
  }


  function populateStates( countryElementId, stateElementId ){

      var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;

      var stateElement = document.getElementById( stateElementId );

      stateElement.length=0;    // Fixed by Julian Woods
      stateElement.options[0] = new Option('Choose the standards','');
      stateElement.selectedIndex = 0;

      var state_arr = s_a[selectedCountryIndex].split("|");

      for (var i=0; i<state_arr.length; i++) {
          stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
      }

      // Assigned all states. Now assign event listener for the criteria.

        if( stateElementId ){
            stateElement.onchange = function(){
                populateCriterias(stateElementId );
            };
        }     
        $("#" + stateElementId).formSelect();
  }


    function populateCountries(countryElementId, stateElementId){
        // given the id of the <select> tag as function argument, it inserts <option> tags
        var countryElement = document.getElementById(countryElementId);
        countryElement.length=0;
        countryElement.options[0] = new Option('Choose the category','-1');
        countryElement.selectedIndex = 0;
        for (var i=0; i<country_arr.length; i++) {
            countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]);
        }

        // Assigned all countries. Now assign event listener for the states.

        if( stateElementId ){
            countryElement.onchange = function(){
                populateStates( countryElementId, stateElementId );
            };
        }
        $("#"+countryElementId).formSelect();
    }

    populateCountries("country", "state");

  </script>

Upvotes: 1

Answers (1)

Dustin Michels

Reputation: 3226

I can't fully follow what you are doing, but I think for this s_b criteria data you want to use a JavaScript object instead of an array.

Arrays

An array is an ordered list of values, indexed by integers, like your s_a "states" data.

  s_a[1]="Energy|Personal Protective Equipment|Walking, Working Surfaces and Fall Protection|Machine Guarding|Electrical Safety|Minimum Safe Behaviors";

At index "1" in the array s_a, you find the value "Energy|Personal Protective Equipment...".

Objects

An object is a data structure where your keys can be values besides integers, like strings, which seems to be what you want to do with your s_b "criteria" data. If you declare s_b as an object instead of an array, then you can use strings as indexes or "keys" like you are trying to do.

var s_b = {};

s_b['Energy']="Energy Walk Abouts. Are there any air leaks, running equipment / with line down, air being used to control bottles, or any other opportunity to reduce energy consumption?";

Then you can look up the value of energy, s_b['Energy'], and get the value you set "Energy Walk Abouts. Are there ....

Hope that helps!

Upvotes: 1

3 Dependent Dropdown Lists on Javascript

Answers (1)

Arrays

Objects

Related Questions