根据两个选择标签中选择的选项进行div显示

时间:2016-09-15 10:52:02

标签: javascript css

pic of code code was not available on this computer

对不起我在其他计算机上编码的图片我需要找到,以便div显示取决于两个选项的组合,如果有人可以帮助那将是伟大的

2 个答案:

答案 0 :(得分:0)

根据所选的两个选择值的组合,您需要显示div或隐藏。

您可以使用

获取所选的选择值
document.getElementById("getFname").value

比较两个选择值并根据它应用样式,而不是在onchange中发送此参数。

检查代码@ http://jsbin.com/nahiko/edit?html,console,output

答案 1 :(得分:0)

基于两个选项隐藏并显示一个DIV。

<select id="selection"> 
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
</select>
<select id="selection2">
 <option value=""></option>
 <option value="A">A</option>
 <option value="B">B</option>
</select>

<div name="toggle"  id="One" style="display:none">
   U can see me, if you select option ONE
</div>

<div name="toggle" id="Two" style="display:none">
  U can see me, if you select option TWO
</div>

 var _selectEle = document.getElementById('selection');

  function toggleDivs(evt){
    var old = document.querySelector('.show') || false;
   if(old){
    old.className = ''
   }
   if(!this.value){
     return;
   }
   if(_selectEle2.value == "A" && _selectEle1.value == "One"){
     document.getElementById("One").className = 'show';
   }
   else if(_selectEle2.value == "B" && _selectEle1.value == "Two"){
     document.getElementById("Two").className = 'show';
   }
 }

 _selectEle1.addEventListener('change', toggleDivs);
 _selectEle2.addEventListener('change', toggleDivs);

JS Fiddle