jQuery 根据下拉菜单隐藏 div

Question

我已经浏览了很多关于如何做到这一点的帖子，并且我已经多次尝试在我的网站上实施它们。无论如何我都不是开发人员，所以我希望有人能帮助我。

我尝试了不同的 jQuery 脚本并取得了一些成功，但我无法真正理解它，因为我自己从未编写过任何真正的脚本。

我目前正在使用 wordpress 开设商店，我需要能够让用户 select 从下拉菜单中选择一个选项。根据他们 select 的选项，它显示或隐藏带有特定 class 的 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>

初始值Select，然后select可以选择Resources或培训当 Select 处于活动状态时，div 中的 none 应该可见。但是 Select 资源或培训应该显示它们各自的 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>

我已将 class 'resource-duplicate' 和 'training-duplicate' 附加到适当的 divs。这应该有助于根据选项 selected.

显示和隐藏正确的 divs

另一个 div 的示例，这个只是 select 可用选项的列表：

<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/ 我尽可能地隐藏了我的内容，但无法根据我的任何 selection 使其正常工作。

我知道这个问题可能有点多，但如有任何帮助，我们将不胜感激！

谢谢，莫腾

Answer 1

试试这个：

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

这里发生的事情是您正在检查下拉列表何时更改，当它更改时，您隐藏所有 .group 元素并显示与当前所选值匹配的元素。

你可以把它分开一点，这样你就可以更好地看到发生了什么：

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

希望对您有所帮助！

Answer 2

将此添加到您的 CSS：

.resource-duplicate{
    display: none;
}

.training-duplicate {
    display: none;
}

然后将此添加到您的 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();        
        }
    });
});

Answer 3

您只需要稍作重构即可使该代码正常工作，但使用代码中的 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 demo

jQuery 根据下拉菜单隐藏 div

jQuery to hide divs based on dropdown

javascript

jquery

show-hide

dropdown