总的来说，我是编码的新手。这也是我在Google App Script上开发的第一个Web应用。
我已经对一些代码进行了改装，我发现该代码可以将依赖项下拉到2个级别（一旦选择“国家”，就会获得相应的“州”列表）。
现在，我正在尝试使之成为一个选定的“状态”，从而获得相应的“条件”列表。在这种情况下，我不在乎选择哪个国家/地区，因为每个标准列表对于一个州来说都是唯一的。为此，我正在“ page-js”中使用 populateCriteria（）。 这是我正在努力工作的功能...
我知道的东西
谢谢。
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>
答案 0 :(得分：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 ...的值。
希望有帮助！