jQuery: Show/Hide Elements based on Selected Option from Dropdown

3 Views

UPDATE: The original question asked was answered. However, the code revealed for all. So, I’ve modified my question below:

So I have the following dynamically generated html via php

Read More
<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>

***THEN IT REPEATS four times: where the #1 goes to 2..3…4 (max to 4 at this time).

I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).

So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.

I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!

***Also, this will be loaded via an external js file.

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. Here is the final answer that worked:

    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');
   }
});
});

    Thanks for your help!

  2. Assuming that you’re outputting proper IDs, you can do something like this (note I replaced the 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();

    });
  });

    Also, consider changing your options like this:

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

    Here’s a jsfiddle for this: http://jsfiddle.net/JrPeR/

  3. There’s my understandable jquery script

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

    Demo here. Take me couple minute to make you easy to understand. Have fun.