1

我对 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();
4

4 回答 4

2

您很好地标记了您的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()最后。那是在页面第一次进入时触发事件。

于 2012-05-03T04:35:51.810 回答
0

我在上面举了你的例子，并创造了我相信你所要求的东西。我删除了 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>
于 2012-05-03T04:25:30.527 回答
0 
$("#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();
于 2012-05-03T04:30:29.417 回答
0

你可以设置小对象

        $(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();
        });
    });
于 2012-05-03T04:38:04.707 回答