Question

我已经在这里经历了很多关于如何做到这一点的帖子，我已经多次尝试在我的网站上实现它们。我不是一个开发者，所以我希望有人可以帮助我。

我尝试了不同的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>

选择的初始值，然后可以选择资源或培训当Select处于活动状态时，不应显示任何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>

我已将'资源重复'和'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

Answer 1

您只需要一个次要的重构，以使该代码有效，但使用代码中的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

Answer 2

试试这个：

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

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

你可以把它分开一点，这样你就可以看到更好的东西：

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

希望这有帮助！

Answer 3

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

jQuery根据下拉列表隐藏div

3 个答案: