打开一个单独的元素点击一个选项

Question

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

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

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

1. option不会触发事件。 select是一个。
2. 您不需要使用.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); 
      }); 
     }); 
}); 

Demo

参考文献：

jQuery .eq()

jQuery .fadeOut()

jQuery .fadeIn()

jQuery .filter()

jQuery .data()