我是新手,我知道我的JavaScript代码很繁琐,而且不是最漂亮的代码,但是我正在在线学习课程,因此,如果您可以提供增强我的逻辑的解决方案,或者基于能够真正帮助您的类似逻辑, 。
我正在做一个项目,并且在html中有这两个下拉列表-
<div>
<label for="design">Design:</label>
<select id="design" name="user_design">
<option>Select Theme</option>
<option value="js puns">Theme - JS Puns</option>
<option value="heart js">Theme - I ♥ JS</option>
</select>
</div>
<div id="colors-js-puns" class="">
<label for="color">Color:</label>
<select id="color">
<option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
<option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option>
<option value="gold">Gold (JS Puns shirt only)</option>
<option value="tomato">Tomato (I ♥ JS shirt only)</option>
<option value="steelblue">Steel Blue (I ♥ JS shirt only)</option>
<option value="dimgrey">Dim Grey (I ♥ JS shirt only)</option>
</select>
</div>
当页面加载时,设计位于“选择主题”选项上,并且颜色无需在第二个列表中填充,直到选择了主题-JS双关或主题I
我已经只能根据选择的设计显示某些颜色,但是在选择了其中一种设计之前,无法弄清楚如何使颜色列表不填充,如果tShirts.value === (为空,因为选择衬衫没有值),然后在tShirts变量中捕获的所有元素上均不显示任何内容。这里有任何简单的解决方法吗?
var tShirts = document.getElementById("design");
//get the color option values into a variable
var ShirtColors = document.getElementById("color");
//function for the value of the design selection to change the corresponding color selector menu.
tShirts.onchange = function() {
if (tShirts.value == "js puns") {
ShirtColors.selectedIndex = 0;
ShirtColors[3].style.display = "none";
ShirtColors[4].style.display = "none";
ShirtColors[5].style.display = "none";
ShirtColors[0].style.display = "initial";
ShirtColors[1].style.display = "initial";
ShirtColors[2].style.display = "initial";
} else if (tShirts.value == "heart js") {
ShirtColors.selectedIndex = 3;
ShirtColors[3].style.display = "initial";
ShirtColors[4].style.display = "initial";
ShirtColors[5].style.display = "initial";
ShirtColors[0].style.display = "none";
ShirtColors[1].style.display = "none";
ShirtColors[2].style.display = "none";
}
}
}
最佳答案
将JSON用于数据并按以下方式进行处理:-
var tShirts = document.getElementById("design");
//get the color option values into a variable
var ShirtColors = document.getElementById("color");
var data = {
"jspuns":["Cornflower Blue:value1","Dark Slate Grey:value2","Gold:value3"], // Give each one a value
"heartjs":["Tomato:value4","Steelblue:value5","dimgrey:value6"] // Give each one a value
};
//function for the value of the design selection to change the corresponding color selector menu.
tShirts.onchange = function() {
ShirtColors.innerHTML = "";
var selectedValue = tShirts.value.split(' ').join('');
if(!data[selectedValue])
return;
for(var i=0;i<data[selectedValue].length;i++){
var option = document.createElement('option');
option.value= data[selectedValue][i].split(':')[1]; // After : is actual value
option.innerHTML = data[selectedValue][i].split(':')[0]; // Before : is display text
ShirtColors.appendChild(option);
}
}
希望对您有帮助。
关于javascript - 如果第一个值默认为另一个列表,则用于在页面加载时隐藏下拉列表选项的JavaScript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37638337/