过滤数组,一些工作,一个不工作

时间:2017-10-25 20:58:17

标签: jquery drop-down-menu filter

我已经构建了一个可排序列表,其中有四个选项可以进行排序。我们的想法是,如果您选择一个下拉选项并且与其他下拉列表没有匹配,则它们会从其他下拉列表中消失。这部分工作完美,但现在问题是“服务”下拉列表似乎根本不起作用。我正在检查我的数据类型,它是,或者至少应该是一个数组。我错过了什么?

谢谢!

        <div id="providers">


          <select id="type" class="options"><option value="">Select Provider Type</option><option value='3'>Youth Empowerment Services</option><option value='2'>Child and Family Services</option><option value='4'>Intellectual or Developmental Disabilities</option><option value='5'>Substance Abuse Managed Service</option></select>        
                        <select id="services" class="options"><option value="">Select Service Type</option><option value="111">Service A</option><option value="112">Service B</option><option value="113">Service C</option><option value="114">Service D</option><option value="115">Service E</option><option value="116">Service F</option><option value="117">Service G</option><option value="118">Service H</option><option value="119">Service I</option></select>        

                        <select id="location" class="options"><option value="">Select Location Type</option><option value="201">Location A</option><option value="202">Location B</option><option value="203">Location C</option></select>  

        <select id="language" class="options"><option value="">Select Language Type</option><option value='17'>Spanish</option><option value='18'>Vietnamese</option><option value='16'>English</option></select>    
        <button id="reset-search">Reset Filter</button>


        <ul id="results" class="list">









            <li class="card" data-type="[5]" data-service="[117, 118, 119]" data-location="[201, 201, 201]" data-language="[16]">
              <h1>Provider C</h1>
              <strong>Provider Type:</strong> <br />
              <a href="http://taxonomytest.dev/provider_type/substance-abuse-managed-service/" rel="tag">Substance Abuse Managed Service</a><br /><br />
              <strong>Language:</strong><br />
              <a href="http://taxonomytest.dev/language/english/" rel="tag">English</a><br /><br />

                      <strong>Services:</strong><br />

                            <ins>Service G</ins><br />
                            Location A<br /><br />

                            <ins>Service H</ins><br />
                            Location A<br /><br />

                            <ins>Service I</ins><br />
                            Location A<br /><br />

            </li>








            <li class="card" data-type="[4]" data-service="[114, 115, 116]" data-location="[201, 202, 203]" data-language="[16, 17]">
              <h1>Provider B</h1>
              <strong>Provider Type:</strong> <br />
              <a href="http://taxonomytest.dev/provider_type/intellectual-or-developmental-disabilities/" rel="tag">Intellectual or Developmental Disabilities</a><br /><br />
              <strong>Language:</strong><br />
              <a href="http://taxonomytest.dev/language/english/" rel="tag">English</a>, <a href="http://taxonomytest.dev/language/spanish/" rel="tag">Spanish</a><br /><br />

                      <strong>Services:</strong><br />

                            <ins>Service D</ins><br />
                            Location A<br /><br />

                            <ins>Service E</ins><br />
                            Location B<br /><br />

                            <ins>Service F</ins><br />
                            Location C<br /><br />

            </li>








            <li class="card" data-type="[2]" data-service="[111, 112, 113]" data-location="[201, 202, 203]" data-language="[16, 18]">
              <h1>Provider A</h1>
              <strong>Provider Type:</strong> <br />
              <a href="http://taxonomytest.dev/provider_type/child-and-family-services/" rel="tag">Child and Family Services</a><br /><br />
              <strong>Language:</strong><br />
              <a href="http://taxonomytest.dev/language/english/" rel="tag">English</a>, <a href="http://taxonomytest.dev/language/vietnamese/" rel="tag">Vietnamese</a><br /><br />

                      <strong>Services:</strong><br />

                            <ins>Service A</ins><br />
                            Location A<br /><br />

                            <ins>Service B</ins><br />
                            Location B<br /><br />

                            <ins>Service C</ins><br />
                            Location C<br /><br />

            </li>

        </ul>  
        </div>

        <script>
        jQuery(function($) {  


        $("select.options").change(function(){

            var type        = $('#type').val();
            var services    = $('#services').val();
            var location    = $('#location').val();
            var language    = $('#language').val();

            type        = parseInt(type);
            services    = parseInt(services);
            location    = parseInt(location);
            language    = parseInt(language);

        if ( $( ".variable" ).length ) {

          $(".card.variable").hide().each(function() {

            var card = $(this);  
            var typearray     = eval($(this).attr("data-type"));
            var servicesarray = eval($(this).attr("data-services"));
            var locationarray = eval($(this).attr("data-location"));
            var languagearray = eval($(this).attr("data-language"));

            if (type) {
                if (jQuery.inArray(type, typearray) != -1)  {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }  

            if (services) {
                if (jQuery.inArray(services, servicesarray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                }; 
            }

            if (location) {
                if (jQuery.inArray(location, locationarray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }

            if (language) {  
                if (jQuery.inArray(language, languagearray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }


          });
        } else {
          $(".card").hide().each(function() {
               alert(services); 
            var card = $(this);  
            var typearray     = eval($(this).attr("data-type"));
            var servicesarray = eval($(this).attr("data-services"));
            var locationarray = eval($(this).attr("data-location"));
            var languagearray = eval($(this).attr("data-language"));

            if (type) {
                if (jQuery.inArray(type, typearray) != -1)  {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }  

            if (services) {
                if (jQuery.inArray(services, servicesarray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };

                }; 
            }

            if (location) {
                if (jQuery.inArray(location, locationarray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }

            if (language) {  
                if (jQuery.inArray(language, languagearray) != -1) {
                    $(card).show();
                    if (!$(this).hasClass("variable")) {
                        $(card).addClass('variable');
                    };
                };
            }


          });
        };


            var itemtype= "";
            var itemservices= "";
            var itemlocation= "";
            var itemlanguage= "";
            $( ".variable" ).each( function() {
                itemtype = $(this).data('type');
                itemservices = $(this).data('service');
                itemlocation = $(this).data('location');
                itemlanguage = $(this).data('language');
            });

             console.log(itemtype);
             var excludetypesarray         = eval(itemtype);
             var excludeservicearray      = eval(itemservices);
             var excludelocationarray     = eval(itemlocation);
             var excludelanguagearray     = eval(itemlanguage);


          $("select.options#type option").hide().each(function() {
                var checktype = $(this).val();
                var checktype = parseInt(checktype);
                var select = $(this);
                if (jQuery.inArray(checktype, excludetypesarray) != -1) { 
                    $(select).show();   
                }
          });

          $("select.options#services option").hide().each(function() {
                var checktype = $(this).val();
                var checktype = parseInt(checktype);
                var select = $(this);
                if (jQuery.inArray(checktype, excludeservicearray) != -1) { 
                    $(select).show();   
                }
          });

          $("select.options#location option").hide().each(function() {
                var checktype = $(this).val();
                var checktype = parseInt(checktype);
                var select = $(this);
                if (jQuery.inArray(checktype, excludelocationarray) != -1) { 
                    $(select).show();   
                }
          });

          $("select.options#language option").hide().each(function() {
                var checktype = $(this).val();
                var checktype = parseInt(checktype);
                var select = $(this);
                if (jQuery.inArray(checktype, excludelanguagearray) != -1) { 
                    $(select).show();   
                }
          });


        });


            $("#reset-search").on('click', function(){
                $(".card").each(function() {
                   $(this).show();
                    $(this).removeClass('variable');
                });
                $("select.options option").each(function() {

                   $(this).show(); 
                });
            });

        });

        </script> 

1 个答案:

答案 0 :(得分:0)

我自己的愚蠢错误。要仔细检查那些变量名称