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

how to display hide and show select box?

本文关键字：显示 选择 隐藏 何显示      更新时间：2023-11-02

我为我的需求搜索了很多。所以我发布了这个问题。我的要求是，当用户根据该值从下拉列表中选择一个值时，将显示一个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，jquery或下面提到的所有这些div是否有其他解决方案是的唯一解决方案

提前感谢

Ramsai

<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>

请在此处回答：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();           
      }     
    });
});

这样就可以了。基本上，您的select选项值必须与div ID相对应。然后，您不需要为每个规则硬编码show（）或hide（）规则。

或者：

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

Fiddle

相关文章：