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>

当页面加载时，设计位于＆＃34;选择主题＆＃34;选项，并且颜色不需要填充在第二个列表上，直到主题 - JS双关语被选中或主题I＆lt; 3 Js。

我已经只根据选择了哪种设计显示某些颜色，但是无法弄清楚如何在选择其中一个设计之前填充颜色列表的位置，我尝试将其设置为tShirts.value = ==＆＃34;＆＃34; （是空的，因为选择一件衬衫没有价值），然后在抓住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";
    }

    }
}

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

这应该这样做。

为＆＃34;选择主题＆＃34;添加值和一个选项＆＃34;选择设计＆＃34;到颜色列表并玩它:)

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

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

3 个答案: