我是新手,我知道我的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 &#9829; 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 &#9829; JS shirt only)</option>
        <option value="steelblue">Steel Blue (I &#9829; JS shirt only)</option>
        <option value="dimgrey">Dim Grey (I &#9829; 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/

10-12 00:06
查看更多