Question

我知道这不是最佳解决方案，通过SQL语句动态加载讲道会更好但我在http://www.ypc.org.au/resources/sermons/all#list上有一个讲道页面

我有一个过滤部分，允许你按书（系列），牧师和年份过滤布道。

目前所有讲道都是在页面加载时加载的。然后根据通过以下Jquery脚本选择的过滤器隐藏一些布道。

这完全隐藏了任何不应为所选过滤器显示的布道。

问题是我想隐藏可用的选项，这些选项不是所选过滤器选项的一部分。

例如：传教士Al Burke没有在James系列中讲道，所以当我将系列过滤器更改为James时，他的名字也应该作为Preacher选择框中的可选选项消失。否则选择James系列和Al Burke Preacher都不会显示任何布道，因为他没有在该系列中宣讲过。

＆＃13;

$(function() {
  $("#series, #preacher").change(function() {

    var series = $("#series").val(); //Series user has selected.
    var preacher = $("#preacher").val(); //Preacher user has selected.
    $(".wrapper").hide();

    if (series == "all") {
      if (preacher == "all") {
        $(".wrapper").show(); // Show All Sermons
      } else { //Series == All AND Preacher != All
        $(".wrapper").each(function() {
          if ($(this).hasClass(preacher)) {
            $(this).show(); //Show Sermons from selected preacher
          }

        });
      }

    } else { //Series != ALL
      if (preacher == "all") {

        $(".wrapper").each(function() {
          if ($(this).hasClass(series)) {
            $(this).show(); //Show Sermons from selected series
          }

        });

      } else {
        $(".wrapper").each(function() {
          if ($(this).hasClass(series) && $(this).hasClass(preacher)) {
            $(this).show(); //Show Sermons from selected series & preacher.
          }

        });
      }
    }



  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper james peter_gimbert"> class="wrapper james peter_gimbert" </div>
<div class="wrapper james adrian_armstrong"> class="wrapper james adrian_armstrong" </div>
<div class="wrapper galatians al_burke"> class="wrapper galatians al_burke" </div>
<div class="wrapper galatians adrian_armstrong"> class="wrapper galatians adrian_armstrong" </div>
<div class="wrapper galatians al_burke"> class="wrapper galatians al_burke" </div>
<div class="wrapper galatians peter_gimbert"> class="wrapper galatians peter_gimbert" </div>
<div class="wrapper galatians al_burke"> class="wrapper galatians al_burke" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper 1_samuel adrian_armstrong"> class="wrapper 1_samuel adrian_armstrong" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper 1_samuel adrian_armstrong"> class="wrapper 1_samuel adrian_armstrong" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper philippians adrian_armstrong"> class="wrapper philippians adrian_armstrong" </div>
<div class="wrapper 1_samuel al_burke"> class="wrapper 1_samuel al_burke" </div>
<div class="wrapper psalms al_burke"> class="wrapper psalms al_burke" </div>
<div class="wrapper psalms al_burke"> class="wrapper psalms al_burke" </div>


<select id="series">
            <option value="all">All Books</option>
            <option value="james">James</option>
            <option value="galatians">Galatians</option>
            <option value="philippians">Philippians</option>
            <option value="1_samuel">1 Samuel</option>
    </select>

<select id="preacher">
            <option value="all">All Preachers</option>
            <option value="al_burke">Al Burke</option>
            <option value="peter_gimbert">Peter Gimbert</option>
            <option value="adrian_armstrong">Adrian Armstrong</option>
    </select>

＆＃13;

Answer 1

感谢您分享完整的代码，

我看到你的选择框值与包装器直接相关。

请尝试以下代码。

    var r = "";
    var v ="";
    $(document).ready(function(){

        $("#series").change(function(){
            v = $(this).val(); 
            r = /(v)/;
            if(v == "all"){
                $("#preacher").children().show();
                return;
            }
            $("#preacher option").hide();
//This line removed

            $(".wrapper").each(function(k1,v1){
                if($(v1).attr("class").search(" "+v+" ")<0){
                    $(v1).hide();
                }else{
                    $(v1).show();
                    $("#preacher").children("option[value^=" + $(v1).attr("class").split(" ")[2] + "]").show()
                }
            });
             $("#preacher").children("option[value^=all]").show(); // Line Added
        });

    });

我希望这可以解决您在下拉菜单中显示和隐藏价值的问题

根据选定的过滤器更改可用的选择框选项[Jquery]

1 个答案: