如果第一个值在另一个列表中是默认值，则用于在页面加载时隐藏下拉列表选项的 Javascript

Question

我很菜鸟，我知道我的 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

我已经根据选择的设计仅显示某些颜色，但无法弄清楚如何在选择其中一种设计之前不填充颜色列表的位置，我尝试将其设置为 if tShirts.value = == "" （为空，因为选择一件衬衫没有值），然后在抓取到 tShirts 变量中的所有元素上显示 none。这里有什么简单的修复方法吗？

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

    }
}

Answer 1

对数据使用 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);
    }  
}

希望对你有所帮助。

Answer 2

应该这样做。

将一个值添加到“选择主题”和一个选项“选择设计”到颜色列表并使用它:)

 <select id="design" name="user_design">
        <option value="none">Select Theme</option> // Add a value to 'no design'
        <option value="js puns">Theme - JS Puns</option>
        <option value="heart js">Theme - I &#9829; JS</option>
      </select>



 <div id="colors-js-puns" class="">
      <label for="color">Color:</label>
      <select id="color">       
        <option value="cornflowerblue" style="display:none">Cornflower Blue (JS Puns shirt only)</option>
        <option value="darkslategrey" style="display:none">Dark Slate Grey (JS Puns shirt only)</option> 
        <option value="gold" style="display:none">Gold (JS Puns shirt only)</option> 
        <option value="tomato" style="display:none">Tomato (I &#9829; JS shirt only)</option>
        <option value="steelblue" style="display:none">Steel Blue (I &#9829; JS shirt only)</option> 
        <option value="dimgrey" style="display:none">Dim Grey (I &#9829; JS shirt only)</option> 
        <option value="none" >Select Design first</option> // Tell them to select design. This is the only one showing initialy
      </select>
    </div>    


tShirts.onchange = function() {
if (tShirts.value == "none") { // Only show them select design
    ShirtColors.selectedIndex = 6;
    ShirtColors[3].style.display = "none";
    ShirtColors[4].style.display = "none";
    ShirtColors[5].style.display = "none";
    ShirtColors[0].style.display = "none";
    ShirtColors[1].style.display = "none";
    ShirtColors[2].style.display = "none";
    ShirtColors[6].style.display = "block";
} else  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 = "block";
    ShirtColors[1].style.display = "block";
    ShirtColors[2].style.display = "block";
    ShirtColors[6].style.display = "none";
} else if (tShirts.value == "heart js") {
    ShirtColors.selectedIndex = 3;
    ShirtColors[3].style.display = "block";
    ShirtColors[4].style.display = "block";
    ShirtColors[5].style.display = "block";
    ShirtColors[0].style.display = "none";
    ShirtColors[1].style.display = "none";
    ShirtColors[2].style.display = "none";
    ShirtColors[6].style.display = "none";
}

}
}

Answer 3

我认为你必须创建一个样式

// css sheet
.notInChoice { display: none }

创建一组数组以按 id 排列数据

choices = ['choice1', ... 'choiceN'];

为每个选项设置一个数组以知道要显示的内容

choice1 = ['toshow1-1',...,'toshow1-M'];
//...

分配给类以快速编码

<ul class="dropdown">
  <li class="choice" id="choiceI">item in your first dropdown</li>
  //...
</ul>
<ul class="dropdown">
  <li class="underchoice" id='toshowI-j'>item in your second dropdown</li>
  // ...
</ul>

现在是一个小的 jQuery 提示

function setSecondDropDown(selectedItem){
   // everybody hidden
   $('.underchoice').addClass('notInChoice');
   // you need to set the data object from your arrays
   // a small loop to show wath you need
   for (x in data[selectedItem] ){
     $('#'+x).removeClass('notInChoice');
   }
}
// binding behaviors
$(document).ready(function(){
  $('.choice').click(function( event ) {
    id=$(this).attr('id');
    setSecondDropDown(id);
  });
});