打開一個單獨的元素點擊一個選項

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