Question

我希望在点击某个元素的选项时打开一个列表。但我希望为每个选项单独打开该列表，但一次只能打开一个。我的意思是，当我点击option1时，会出现一个list1，然后我点击option2，列表1消失，list2打开，但是以相同的方式。我用了这段代码：

$(document).ready(function () {
    $(".select-prod option").each(function(){
        $(this).click(function(){
            //  alert("sdd");
                $(this).parent().next("ul.suggestedprod").fadeIn(800);
            });         
        });
    });

HTML：

<select class="form-control select-prod">
    <option>Aviva Freedom Life Advantage</option>
    <option>Aviva Freedom Life Advantage(Oct 2013)</option>
    <option>Aviva iGrowth</option>
</select>

  <ul class="suggestedprod">
  <li class="list-unstyled">Suggested policies similar to this one:</li>

    <li><a href="#">Aviva Live Smart</a></li>
    <li><a href="#">Aviva Live Smart(Oct 2013)</a></li>
    <li><a href="#">Aviva New Freedom Life Plan</a></li>
  </ul>

正在发生的事情是ul.suggestedprod出现在我第一次点击thr的任何选项的选择上，然后它不会在第二次点击时淡入。我尝试.change()而不是.click，但它不起作用。这里是小提琴：http://jsfiddle.net/ZZL62/3/

提前致谢

Answer 1

假设您有一个列表 - 每个选项都没有样式列表 - 您可以将您的javascript更改为以下内容：

$(document).ready(function () {
    $(".select-prod").change(function(){
        //hide all existing
        $("ul.suggestedprod").hide(); 

        //show only the nth list for this option
        $("ul.suggestedprod:nth(" + this.selectedIndex + ")").fadeIn(800);
    });
});

请参阅更新的小提琴：http://jsfiddle.net/ZZL62/6/

Answer 2

您的代码中存在一些问题。

option不会触发事件。 select就是那个。
您无需使用.each()，因为您的选择器无论如何都会调出一个集合。

一个解决方案

假设您的HTML标记符合以下结构（您的uls将按照与options相同的顺序放置），这应该有效：

<select class="form-control select-prod">
    <option>Product1</option>
    <option>Product2</option>
    <option>Product3</option>
</select>
<ul class="suggestedprod">
    <li class="list-unstyled">Suggested policies similar to this one (1):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>
<ul class="suggestedprod">
    <li class="list-unstyled">Suggested policies similar to this one (2):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>
<ul class="suggestedprod">
    <li class="list-unstyled">Suggested policies similar to this one (3):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>

...

$(function() {
    // Starts by showing the first one.
    // :eq(n) selects the item with index equals n in the collection.
    $("ul.suggestedprod:eq(0)").fadeIn(800);

    $(".select-prod").on("change", function () {
        $this = this;

        // Hide all that are shown now.
        // Wait for the fadeOut to finish its work before showing the selected.
        $("ul.suggestedprod")
            .filter(function(){ return !$(this).is(":hidden"); })
            .fadeOut(800, function() {
                // Show the selected.
                // Which is the ul with index equals to the option selected.
                $("ul.suggestedprod:eq(" + $this.selectedIndex + ")").fadeIn(800);
            });
        });
});

Demo

另一种解决方案

由于我希望您提供options值，因此也可以这样做：

<select class="form-control select-prod">
    <option value="1" selected="selected">Product1</option>
    <option value="2">Product2</option>
    <option value="3">Product3</option>
</select>
<ul class="suggestedprod" data-myval="1">
    <li class="list-unstyled">Suggested policies similar to this one (1):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>
<ul class="suggestedprod" data-myval="2">
    <li class="list-unstyled">Suggested policies similar to this one (2):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>
<ul class="suggestedprod" data-myval="3">
    <li class="list-unstyled">Suggested policies similar to this one (3):</li>
    <li><a href="#">policy1</a>
    </li>
    <li><a href="#">policy2</a>
    </li>
    <li><a href="#">Policy3</a>
    </li>
</ul>

...

$(function() {
    var sel = $(".select-prod").val();   

    // Starts by showing the first one.
    $("ul.suggestedprod[data-myval=" + sel + "]").fadeIn(800);

    $(".select-prod").on("change", function () {
        sel = $(".select-prod").val();

        // Hide all that are shown now.
        $("ul.suggestedprod")
            .filter(function(){ return !$(this).is(":hidden"); })
            .fadeOut(800, function() {
                // Show the selected.
                $("ul.suggestedprod[data-myval=" + sel + "]").fadeIn(800);
            });
        });
});

参考文献：

单击选项单独打开元素

2 个答案: