Question

我为了我的要求而谷歌很多。所以我发布了这个问题。我的要求是当用户从下拉列表中选择一个值时，将显示一个div。但在默认情况下，所有显示值的div都会显示。

这是我的代码：

<select name="lab_1" id="title" >
  <option value="All" onclick="showAll();" >All</option>
  <option value="one" onclick="showOther();">One</option>
  <option value="two" onclick="showOther();">Two</option>    
</select>
<div id="All" >
  hiihdhfhdf
  <div id="otherTitle" style="display:none;" >
    select
  </div>
  <div id="otherTitle2" style="display:none;" >
    ramsai
  </div>
</div>

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('#title').change(function() {
    var all= $("#All").val();
    alert('hi');
    if(all==""){
        $("#otherTitle").show();
        $("#otherTitle2").show();
      }
      else if (this.value == "one") {
        $("#otherTitle").show();
        $("#otherTitle2").hide();
      }
      else if (this.value=="two"){
        $("#otherTitle2").show();
        $("#otherTitle").hide();
      }     
    });
    });


</script>
</body>

这里有上面的代码当我点击所有我的div没有显示但是当我去一个或两个选项时它显示所有的值。我有42个div是否有任何其他解决方案，所有这些div在jquery或下面提到的是唯一的解决方案

提前谢谢

Ramsai

Answer 1

<select name="lab_1" id="title" >
<option value="All" onclick="show(this.value);" >All</option>
<option value="one" onclick="show(this.value);" >One</option>
<option value="two" onclick="show(this.value);" >Two</option>
</select>

现在您的JavaScript将如下所示：

<script>
function show(val){

  if(val=="All"){

     document.getElementById("otherTitle").style.visibility="";
     document.getElementById("otherTitle2").style.visibility="";

 }elseif(val=="one"){

     document.getElementById("otherTitle").style.visibility="";
     document.getElementById("otherTitle2").style.visibility="collapse";

 }elseif(val=="two"){

   document.getElementById("otherTitle").style.visibility="collapse";
   document.getElementById("otherTitle2").style.visibility="";
 }
}
</script>

Answer 2

在这里回答：http://jsfiddle.net/Hxadj/

代码中有一些额外的东西不需要存在。你也在测试All的价值。我不确定为什么，你需要的是选择的价值（this.value == X）

$(function() {
$('#title').change(function() {
if(this.value == "All"){
    $("#All").show();        
    $("#otherTitle").show();
    $("#otherTitle2").show();
  }
  else if (this.value == "one") {
    $("#All").hide();          
    $("#otherTitle").show();
    $("#otherTitle2").hide();
  }
  else if (this.value=="two"){
    $("#All").hide();          
    $("#otherTitle2").show();
    $("#otherTitle").hide();
  }     
});
});

<强>更新

此处链接：http://jsfiddle.net/Hxadj/1/

HTML：

<select name="lab_1" id="title" >
<option value="All">All</option>
<option value="otherTitle">One</option>
<option value="otherTitle2">Two</option>
</select>

<div id="All" class="togglers">hiihdhfhdf</div>
<div id="otherTitle" class="togglers">select</div>
<div id="otherTitle2" class="togglers">ramsai</div>

JS

    $(function() {
    $('#title').change(function() {
    var divName = this.value;
    if(this.value == "All"){    
        $(".togglers").show();
    }else{      
        $(".togglers").hide();
        $("#"+divName).show();           
      }     
    });
});

这应该这样做。基本上，您的选择选项值必须与div ID相对应。然后你不需要为每一个进入并硬编码show（）或hide（）规则。

Answer 3

或者再次：

$('#title').change(function() {
    var id = $(this).val();
    $('#otherTitle, #otherTitle2').not('#'+id).hide();
    $('#'+id).children().show();         
 });

Fiddle

如何显示隐藏和显示选择框？

3 个答案: