jQuery to hide divs based on dropdown

问题

I've gone through a lot of the posts here already on how to do this, and I've tried multiple times to implement them on my website. I'm not a developer by any means, so I'm hoping someone can help me out.

I've tried different jQuery scripts and have had some success, but I can't really wrap my head around it as I've never done any real scripting myself.

I'm currently using wordpress to set up a shop, and I need the ability to have users select an option from a dropdown menu. Depending on the option they select, it shows or hides a div with a certain class. Using wordpress, I also don't have the ability to modify the core files, so I'm looking for a solution that'll work with the existing code.

My dropdown looks like this, and I'm not able to change how this is structured:

<div class="fes-fields">
    <select data-required="1" data-type="select" name="download_tag[]" id="download_tag" class="download_tag">
        <option value="-1">— Select —</option>
        <option class="level-0" value="29">Resources</option>
        <option class="level-0" value="28">Training</option>
    </select>
</div>

The initial value which Select, then there's the option to select either Resources or Training When Select is active, none of the divs should be visible. But Selecting either Resources or Training should display their respective divs.

Here's an example of one of the divs:

<div class="fes-el section_break section_break_1511992265 resource-duplicate">      
    <div class="fes-section-wrap">
        <h2 class="fes-section-title">Resources</h2>
        <div class="fes-section-details">If you're uploading resources, this is where you specify which categories applies</div>
    </div>
</div>

I've appended the class 'resource-duplicate' and 'training-duplicate' to the appropriate divs. This should help show and hide the correct divs depending on the option selected.

An example of another div, this one is just a list of selectable options:

<div class="fes-el taxonomy level training-duplicate">  
    <div class="fes-label">
        <label for="level">Level </label>
    </div>
    <div class="fes-fields">
        <ul class="fes-category-checklist">
            <li id="level-30">
                <label class="selectit">
                    <input value="30" type="checkbox" name="level[]" id="in-level-30">  
                     Beginner
                </label>
            </li>
            <li id="level-32">
                <label class="selectit">
                    <input value="32" type="checkbox" name="level[]" id="in-level-32"> 
                    Expert
                </label>
            </li>  
            <li id="level-31">
                <label class="selectit">
                    <input value="31" type="checkbox" name="level[]" id="in-level-31">  
                    Intermediate
                </label>
            </li>  
        </ul>  
    </div>
</div>

I tried implementing this script: http://jsfiddle.net/crustyashish/wSW7z/ I got as far as hiding my content, but couldn't get it to work based on any of my selections.

I know it might be a bit much to ask, but any help would be greatly appreciated!

Thank you, Morten

回答1:

You just need a minor refactor in order to make that code works, but using the html classes from your code:

  $(document).ready(function () {
      $('.resource-duplicate , .training-duplicate').hide();
      $('#download_tag').change(function () {
         $('.resource-duplicate , .training-duplicate').hide();
         var choice = $('#download_tag option:selected').text()
         if(choice === 'Resources'){
            $('.resource-duplicate').show();
         }
         if(choice === 'Training'){
            $('.training-duplicate').show();
         }
      })
  });

You can see it working here: JSFiddle demo

回答2:

Try this:

$('#selectMe').on('change', function() {
  $('.group').hide();
  $('#' + $(this).val()).show();
})

What's happening here is that you're checking for when the dropdown is changed, when it's changed, you hide all of your .group elements and you show the element that matches the currently selected value.

You could split this out a bit more so that you can see what's going on better like this:

$('#selectMe').on('change', function() {
  $('.group').hide();
  var selectedValue = $(this).val();
  $('#' + selectedValue).show();
});

Hope this helps!

回答3:

Add this to your CSS:

.resource-duplicate{
    display: none;
}

.training-duplicate {
    display: none;
}

Then add this to your jQuery:

$(document).ready(function () {
    $('#download_tag').change(function(){
        if($(this).val() == 29){      
            $('.training-duplicate').hide();
            $('.resource-duplicate').show();
        }
        else {
            $('.resource-duplicate').hide();
            $('.training-duplicate').show();        
        }
    });
});

来源：https://stackoverflow.com/questions/48386547/jquery-to-hide-divs-based-on-dropdown

标签

javascript

jquery

show-hide

dropdown