3 个依赖于 Javascript 的下拉列表答案

【问题标题】：3 Dependent Dropdown Lists on Javascript3 个依赖于 Javascript 的下拉列表
【发布时间】：2023-04-06 21:09:01
【问题描述】：

首先，我对一般的编码非常陌生。这也是我在 Google App Script 上开发的第一个网络应用程序。

我已经改进了一些代码，我发现这些代码可以将依赖下拉菜单设置为 2 个级别（一旦您选择“国家”，您就会得到相应的“州”列表）。

现在我正在努力做到一旦选择了“状态”，您就会得到相应的“标准”列表。我不在乎在这种情况下选择了哪个国家，因为每个标准列表对于一个州来说都是独一无二的。为此，我在“page-js”中使用 populateCriteria()。 这是我正在努力解决的功能......t

我知道的一些事情：

我知道在前两个下拉菜单中，索引用于匹配数组...要按字词搜索，我需要使用 Object()（例如，如果我选择状态“能源”，请找到表示的条件列表作为“能量”？）（谢谢@Dustin Michaels）
我正在使用 materialcss。我发现这会阻碍我的标准下拉更新
我不能只对条件进行搜索和匹配，因为有些州的条件有多个选项

谢谢。

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>

【问题讨论】：

欢迎。您的代码使用$()，但未定义代码也有include("page-js");，但不包括服务器端代码。请查看此指南：minimal reproducible example.
当您提出特定的编程问题时，我们会提供最佳答案。我们很难回答像您现在提出的广泛问题，因为我们无法访问您的数据或您的大脑。只有你才能真正回答这个问题。我最近做了一个包含三个相关选择的脚本。国家/州/城市，所以这是可能的，但你可能不得不考虑一下。提出问题并提供一些代码并不能保证一个好的答案。注意 Ruben 的链接：关键是 minimal 可重现的示例。

标签： javascript google-apps-script web-applications google-apps

【解决方案1】：

我不能完全理解你在做什么，但我认为对于这个 s_b 标准数据，你想使用 JavaScript object 而不是数组。

数组

array 是一个有序的值列表，由整数索引，就像您的 s_a“状态”数据一样。

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

在数组s_a 的索引“1”处，您可以找到值"Energy|Personal Protective Equipment..."。

对象

object 是一种数据结构，其中您的键可以是除整数之外的值，例如字符串，这似乎是您想要对 s_b“标准”数据执行的操作。如果您将s_b 声明为对象而不是数组，那么您可以像尝试那样使用字符串作为索引或“键”。

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?";

然后你可以查看能量值s_b['Energy']，得到你设置的值"Energy Walk Abouts. Are there ...。

希望有帮助！

【讨论】：

谢谢。我想做的是这样的：假设一个人选择“EOHS”作为他们的国家，那么他/她可以从下拉列表中选择“能源，个人防护设备，步行...... ETC”。只有这样，第三个下拉列表才变得可选，其中该下拉列表的选项是 s_b['Energy'] （多个选项由 "|" 分隔）。我不清楚如何让我的程序识别我为第二个下拉框（即状态）选择的选项，然后在第三个框中显示相应的一组标准值。