作为序言，我对编码总体上是 super 新手。这也是我在 Google App Script 上开发的第一个网络应用程序。
我已经改进了一些代码，我发现它可以将相关下拉菜单分为 2 个级别(选择“国家/地区”后，您将获得相应的“州”列表)。
现在我正在努力做到，一旦选择了“状态”，您就会获得相应的“标准”列表。我不关心在这种情况下选择了哪个国家，因为每个标准列表对于一个州来说都是独一无二的。为此，我在“page-js”中使用了populateCriteria()。 这是我正在努力实现的功能......
我知道的一些事情:
- 我知道在前两个下拉列表中，索引用于匹配数组...要按术语搜索，我需要使用 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>
页面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>
最佳答案
我不能完全理解你在做什么，但我认为对于这个 s_b 标准数据你想使用 JavaScript object而不是数组。
数组
安array是一个有序的值列表，由整数索引，例如您的 s_a“states”数据。
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 ... .
希望对您有所帮助!
关于javascript - 3个依赖于Javascript的下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56652127/