如何選擇<option>標籤與jQuery的功能使用

Question

我想要使用選擇/選項下拉列表，以便當您選擇其中一個選項其他元素顯示或隱藏在頁面的其他地方。我設法做到這一點與單選按鈕使用ID或類選擇器和jQuery的隱藏/顯示功能，但不能使用選擇/選項下拉列表中做到這一點。

代碼如下所示：

HTML ...

<select name="attending"> 
    <option id="yes" value="Yes">Yes</option> 
    <option id="yes_partner" value="Yes_Partner">Yes + Partner</option> 
    <option id="yes_partner_kids" value="Yes_Partner_Kids">Yes + Partner & Kid(s)!!!</option> 
    <option id="no" value="No">No</option> 
</select> 

jQuery腳本...

$(function(){ 
    $("#yes").click(function(){ 
     $(".yes").show(); 
     $(".send").show(); 
     $(".yes_partner").hide(); 
     $(".yes_partner_kids").hide(); 
     $(".main_guest").show(); 
    }); 
}); 

試圖與class和id和使用jQuery選擇，而不是也試過點擊但沒有運氣。適用於單選按鈕，但不適用於<option>。

Answer 1

您需要將change事件附加到select並檢查它的值以決定要顯示/隱藏哪些項目。

$(function(){ 
    $("select[name=attending]").change(function(){  
     if($(this).val() == "yes") 
     { 
     $(".yes").show(); 
     $(".send").show(); 
     $(".yes_partner").hide(); 
     $(".yes_partner_kids").hide(); 
     $(".main_guest").show(); 
     } 
    }); 
}); 

這種方法的問題是，你會需要很多的if-else，這使得代碼錯綜複雜，很難管理。

在我看來，最好的辦法是將你想隱藏的元素定義爲每個選項元素的屬性。

<option id="yes" value="yes" data-show="yes,send,main_guest" data-hide="yes_partner,yes_partner_kids">Yes</option> 

$(function(){ 
    $("select[name=attending]").change(function(){  
     var itemsToShow = $("#" + $(this).val()).attr("data-show").split(','); 
     alert(itemsToShow.length); 
     var itemsToHide = $("#" + $(this).val()).attr("data-hide").split(','); 
     $.each(itemsToShow,function() 
     { 
     $('.' + this).show(); 
     });  
     $.each(itemsToHide,function() 
     { 
     $('.' + this).hide(); 
     });  
    }); 
}); 

下面是一個例子：http://jsfiddle.net/DinoMyte/p8ARq/616/