Question

我对jquery很新，并且搜索了很多。如果选择值为6,7,8或9，我想显示div（free1a）。如果从选择列表中选择任何其他值，则显示div（free2a）。如果选择任何class =“show1”，则使用下面的html显示div id =“free1a”。如果选择任何class =“show2”，则显示div id =“free2a”。

提前感谢任何人的意见

HTML：

<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>

使用Javascript：

$("#free1a").hide();
$("#free2a").hide();
$("#community").change(function(){
   $("#free1a").show($(this).class()==".show1");
}).change();
$("#community").change(function(){
   $("#free2a").show($(this).class()==".show2");
}).change();

Answer 1

你很好地标记了你的HTML。

http://jsfiddle.net/8C8cP/1/

$(function() {
    $('#community').change(function() {
        var option = $(this).find('option:selected');
        $('#free1a').toggle(option.hasClass('show1'));
        $('#free2a').toggle(option.hasClass('show2'));
    }).change();
});

唯一令人困惑的部分是最后的.change()。这是在页面首次进入时触发事件。

Answer 2

我上面举了你的例子并创造了我认为你要求的东西。我删除了javascript include src，因此请确保在测试时将其包含在内。我使用了http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

希望它有所帮助！

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script src="" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#free1a").hide();
    $("#free2a").hide();

    $("#community").change(function(){

        if(this.value == 6 || this.value == 7 || this.value == 8 || this.value == 9){
            $("#free2a").hide();
            $("#free1a").show();
        }
        else if(this.value == 10 || this.value == 11 || this.value == 12 || this.value == 13){
            $("#free1a").hide();
            $("#free2a").show();
        }
        else{
            $("#free1a").hide();
            $("#free2a").hide();
        }

    }).change();
    $("#community").change(function(){

    }).change();
});

</script>
</head>
<body>
<select name="quantity" id="community" class="store-qty" data-inline="true">
      <option value="">Select</option>
      <option class="show1" value="6">6</option>
      <option class="show1" value="7">7</option>
      <option class="show1" value="8">8</option>
      <option class="show1" value="9">9</option>
      <option class="show2" value="10">10</option>
      <option class="show2" value="11">11</option>
      <option class="show2" value="12">12</option>
      <option class="show2" value="13">13</option>
      <option class="show2" value="14">14</option>
      <option class="show2" value="15">15</option>
      <option class="show2" value="16">16</option>
      <option class="show2" value="17">17</option>
      <option class="show2" value="18">18</option>
      <option class="show2" value="19">19</option>
      <option class="show2" value="20">20</option>
    </select>

<div id="free1a">Stuff in here...</div>

<div id="free2a">Other stuff in here...</div>
</body>
</html>

Answer 3

$("#community").change(function(){
    var tmp = $(this).find("option:selected");
    if (!tmp.is('.show1,.show2')){
        $("#free1a,#free2a").hide();
        return;
    }
    var isFree1a = tmp.hasClass("show1");
    $("#free1a").toggle(isFree1a);         
    $("#free2a").toggle(!isFree1a);         
}).change();

Answer 4

你可以设置像

这样的小对象

        $(document).ready(function(){
        var free1a = {'value6':true, 'value7':true, 'value8':true, 'value9':true};
        $("#free1a").hide();
        $("#free2a").hide();

        $('#community').change(function(){

            $("#free1a").hide();
            $("#free2a").hide();

            if(free1a['value'+$(this).attr('value')])
                $("#free1a").fadeIn();
            else
                $("#free2a").fadeIn();
        });
    });

如何根据选择的列表值显示/隐藏2个不同的div？

4 个答案: