-1

我用谷歌搜索了很多我的要求。所以我发布了这个问题。我的要求是当用户根据要显示的 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 的任何其他解决方案，或者下面提到的是唯一的解决方案

先感谢您

拉姆赛

4

3 回答 3

1

在这里回答：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() 规则。

于 2012-07-18T12:52:19.983 回答
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>
于 2012-07-18T12:51:00.887 回答
0

或者再次：

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

小提琴

于 2012-07-18T12:55:00.153 回答