jQuery根据下拉菜单隐藏div [英] jQuery to hide divs based on dropdown

查看:79
本文介绍了jQuery根据下拉菜单隐藏div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经阅读了很多有关如何执行此操作的帖子,并且我已经尝试过多次以在我的网站上实现它们.无论如何我都不是开发人员,所以我希望有人可以帮助我.

我尝试了不同的jQuery脚本并取得了一些成功,但是由于我从未真正进行过任何脚本编写,所以我无法真正解决这个问题.

我目前正在使用wordpress来开设商店,并且我需要能够让用户从下拉菜单中选择一个选项.根据他们选择的选项,它显示或隐藏具有特定类的div. 使用wordpress,我也无法修改核心文件,因此我正在寻找一种可以与现有代码配合使用的解决方案.

我的下拉菜单如下所示,但我无法更改其结构:

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

选择的初始值,然后可以选择资源培训 当选择"处于活动状态时,所有div都不可见.但是选择资源"或培训"应显示其各自的div.

以下是div之一的示例:

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

我已将类'resource-duplicate''training-duplicate'附加到适当的div.根据选择的选项,这应该有助于显示和隐藏正确的div.

另一个div的示例,这个只是可选选项的列表:

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

我尝试实现此脚本: http://jsfiddle.net/crustyashish/wSW7z/ 我可以隐藏自己的内容,但是根据我的选择都无法使它正常工作.

我知道可能要问很多,但是任何帮助将不胜感激!

谢谢你, 莫滕(Morten)

解决方案

您只需要进行少量重构即可使该代码正常工作,但是请使用代码中的html类:

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

您可以在这里看到它的工作: JSFiddle演示

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

解决方案

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

这篇关于jQuery根据下拉菜单隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆