javascript - jQuery:根据下拉列表中的选定选项显示/隐藏元素

Question

更新:最初提出的问题已得到解答。然而，代码为所有人揭晓。所以，我在下面修改了我的问题:

所以我有以下通过 php 动态生成的 html

<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 (如果选择了帖子)和 .所有其他链接自定义(默认设置除外)。

因此如屏幕上所写，应该只有初始 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');
   }
});
});

感谢您的帮助!