jQuery：基於從下拉列表中選擇的選項顯示/隱藏元素

Question

更新：原始問題被回答。但是，代碼揭示了所有。下面所以，我修改了我的問題：

所以我有以下的動態HTML通過PHP產生

<div class="image-link link-posttypes mainSelector1"> 
    <select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]"> 
     <option value="">default</option> 
     <option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option> 
     <option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option> 
    </select> 
</div> 

<div class="image-link link-pages1"> 
    <select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]"> 
     <option value="50" class="level-0">About</option> 
     <option value="65" class="level-0">Contact</option> 
     <option value="2" class="level-0">Sample Page</option> 
     <option value="60" class="level-0">Staff</option> 
    </select> 
</div> 

<div class="image-link link-posts1"> 
    <select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]"> 
     <option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option> 
    </select> 
</div> 

<div class="image-link link-custom1"> 
    <input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]"> 
</div> 

***然後重複四次：在＃1變爲2..3 ... 4（此時最大爲4）。

我有能力標籤div .classes，選擇#ids和選項類。但是，我希望能夠做的是基於從div .link-posttypes中選擇的選項，我想要揭示.link-pages（如果選擇了頁面）或.link-posts（如果選擇了post）和。鏈接自定義爲所有其他（默認除外）。

因此，在屏幕上應該只有最初的div，並且一旦用戶選擇一個項目，適當的div出現。

我從來沒有在jQuery或JavaScript中開發任何東西。這是我的首航。任何幫助將不勝感激！

***此外，這將通過外部js文件加載。

Answer 1

這裏是工作的最終答案：

jQuery(document).ready(function($) { 

$(".link-posttypes select").change(function(){ 
    var selectedVal = $(":selected",this).val(); 

    if(selectedVal=="post"){ 
     $(this).parent().nextAll(".link-pages").hide(); 
     $(this).parent().nextAll(".link-posts").slideDown('slow'); 
     $(this).parent().nextAll(".link-custom").hide(); 
    }else if(selectedVal=="page"){ 
     $(this).parent().nextAll(".link-pages").slideDown('slow'); 
     $(this).parent().nextAll(".link-posts").hide(); 
     $(this).parent().nextAll(".link-custom").hide(); 
    }else if(selectedVal!=""){ 
     $(this).parent().nextAll(".link-pages").hide(); 
     $(this).parent().nextAll(".link-posts").hide(); 
     $(this).parent().next().nextAll(".link-custom").slideDown('slow'); 
    }else{ 
     $(this).parent().nextAll(".link-pages").hide(); 
     $(this).parent().nextAll(".link-posts").hide(); 
     $(this).parent().nextAll(".link-custom").hide(); 
    } 
}); 
}); 

jQuery(document).ready(function($) { 

$(".image-content select").change(function(){ 
    var selectedVal = $(":selected",this).val(); 

    if(selectedVal=="content-limit"){ 
     $(this).parent().next().nextAll(".content-limit-chars").slideDown('slow'); 
     $(this).parent().nextAll(".content-custom").hide(); 
    }else if(selectedVal=="custom-content"){ 
     $(this).parent().nextAll(".content-limit-chars").hide(); 
     $(this).parent().next().nextAll(".content-custom").slideDown('slow'); 
    } 
}); 
}); 

感謝您的幫助！

Answer 2

假設你正在輸出正確的ID，你可以做這樣的事情（注意我更換ID）：

$(window).load(function(){ 
    // hide all the divs except the posttypes 
    $('.image-link').not('.link-posttypes').hide(); 
    $('#wp_accordion_images_20110630022615_post_type').change(function() { 
     var divSelector = '.link-' + $(this).val(); 
     $('.image-link').not('.link-posttypes').hide(); 
     $(divSelector).show(); 

    }); 
    }); 

另外，還要考慮改變你的options這樣的：

<option value="posts" class="post-type">Post</option> 
<option value="pages" class="post-type">Page</option> 
<option value="menu_items" class="post-type">Menu Items</option>   
<option value="wps_employees" class="post-type">Employees</option> 
<option value="custom">Custom Link</option> 

這裏是一個jsfiddle爲此：http://jsfiddle.net/JrPeR/

Answer 3

有我可以理解的jQuery腳本

jQuery(document).ready(function($) { 
    $(".link-pages").hide(); 
    $(".link-posts").hide(); 
    $(".link-custom").hide(); 
    $(".link-posttypes select").change(function(){ 
     var selectedVal = $(":selected",this).val(); 
     if(selectedVal=="post"){ 
      $(".link-pages").hide(); 
      $(".link-posts").show(); 
      $(".link-custom").hide(); 
     }else if(selectedVal=="page"){ 
      $(".link-pages").show(); 
      $(".link-posts").hide(); 
      $(".link-custom").hide(); 
     }else if(selectedVal!=""){ 
      $(".link-pages").hide(); 
      $(".link-posts").hide(); 
      $(".link-custom").show(); 
     }else{ 
      $(".link-pages").hide(); 
      $(".link-posts").hide(); 
      $(".link-custom").hide(); 
     } 
    }); 
}); 

演示here。請花幾分鐘讓你容易理解。玩的開心。

Answer 4

http://jsfiddle.net/JrPeR/3/

加一個條件，所以如果它不是兩個變量則默認爲定製。