JQuery / JS:选择更改甚至不会从Jquery代码更改时触发

时间:2017-04-09 18:47:19

标签: javascript jquery select drop-down-menu

在stackoverflow上发布我的第一个问题。我从来没有发生过stackoverflow无法为我提供已经发布的答案但是第一次的所有内容。这是我一直在努力解决的问题:

我使用HTML表单将数据(特定值)从一个页面传输到另一个页面(不了解PHP)。在专用网站上,我有一个列表组合,可以通过更改输入和选择(下拉列表)进行过滤。过滤系统的JQuery完美运行。但是,我编写了一些JS,它们将这些选择的值更改为延迟后从上一个站点传输的值,但此更改不会触发"选择更改"过滤系统的事件。下面是在网站上运行的JS。同样,当我手动更改select时,过滤器系统会工作,但是当我的JS代码在底部更改select时,它不会执行。

欢迎任何建议。

谢谢!

jQuery(window).load( function(){


        var filters = {};

        var $container = $('.grid-container');

        $container.isotope();

        $('.combination-filter').on( 'change', 'select', function() {
            var $this = $(this);
            // get group key
            var $buttonGroup = $this.closest('.btn-groupn');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
            // combine filters
            var filterValue = concatValues( filters );
            $container.isotope({ filter: filterValue });

            return false;
        });

        // flatten object by concatting values
        function concatValues( obj ) {
            var value = '';
            for ( var prop in obj ) {
                value += obj[ prop ];
            }
            return value;
        }

        $(window).resize(function() {
            $container.isotope('layout');
        });


        function initselect() {

            var parameters = location.search.substring(1).split("&");

            var temploca = parameters[0].split("=");
            loca = unescape(temploca[1]);
            $("input[name=locations]").val(loca);

            var tempsqua = parameters[1].split("=");
            squa = unescape(tempsqua[1]);
            $("select[name=squarems]").val(squa);

            var temppric = parameters[2].split("=");
            pric = unescape(temppric[1]);
            $("select[name=pricings]").val(pric);

            };

        setTimeout(initselect, 1000)

    });

HTML代码下方。我为其中的大部分道歉,但希望它足以让我们弄明白。

<header id="header" class="transparent-header full-header sticky-header" data-sticky-class="not-dark">

        <div id="header-wrap">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <!-- Logo
                ============================================= -->
                <div id="logo">
                    <a href="http://nomadr.nl" class="standard-logo" data-dark-logo="images/nomadrlogoblack.png"><img src="images/nomadrlogoblack.png" alt="Canvas Logo"></a>

                </div><!-- #logo end -->

                <div  class="combination-filter" style="display: inline-block; width: 40%; margin-top: 11px;">

                        <div class="navblock" style="border-radius: 4px 0px 0px 4px;">
                        <i class="icon-globe"></i>
                        <input id="searchTextField" type="text" name="locations" placeholder="Location">
                        </div>

                        <div class="navblock btn-groupn" role="group" data-filter-group="space" data-container="#portfolio" style="margin-left: -4px; margin-right: -4px;">
                        <i class="icon-external-link"></i>
                        <select name="squarems">
                            <option class="btnf" data-filter="*" value="all">All</option>
                            <option class="btnf" data-filter=".tenm2" value="+10m2">+10m<sup>2</sup></option>
                            <option class="btnf" data-filter=".fifteenm2" value="+15m2">+15m<sup>2</sup></option>
                            <option class="btnf" data-filter=".twentym2" value="+20m2">+20m<sup>2</sup></option>
                            <option class="btnf" data-filter=".twentyfivem2" value="+25m2">+25m<sup>2</sup></option>                                    
                        </select>
                        </div>

                        <div class="navblock btn-groupn" role="group" data-filter-group="price" data-container="#portfolio" style="border-radius: 0px 4px 4px 0px; box-shadow: 0.5px 0.5px 1px lightgrey;">
                        <i class="icon-euro"></i>
                        <select name="pricings" >
                            <option class="btnf" data-filter="*" value="all">All</option>
                            <option class="btnf" data-filter=".p450" value="450max.">450max.</option>
                            <option class="btnf" data-filter=".p500" value="500max.">500max.</option>
                            <option class="btnf" data-filter=".p550" value="550max">550max.</option>                                    
                            <option class="btnf" data-filter=".p600" value="600max">600max.</option>
                        </select>
                        </div>

                </div>

                <!-- Primary Navigation
                ============================================= -->
                <nav id="primary-menu" class="dark">

                    <ul class="one-page-menu">
                        <li><a href="http://nomadr.nl/"><div>Home</div></a></li>
                        <li class="current"><a href="http://nomadr.nl/listings/"><div>Listings</div></a></li>
                        <li><a href="http://nomadr.nl/faq/"><div>FAQ</div></a></li>
                        <li><a href="http://nomadr.nl/proprietor/"><div>Proprietor</div></a></li>
                        <li><a href="http://nomadr.nl/blog/"><div>Blog</div></a></li>
                        <li><a href="http://nomadr.nl/contact/"><div>Contact</div></a></li>
                    </ul>


                </nav><!-- #primary-menu end -->

            </div>

        </div>

    </header><!-- #header end -->   

    <section id="content">

        <div class="content-wrap" style="padding-top: 50px !important">


            <div class="container clearfix">

                <!--<div class="row topmargin-lg bottommargin-sm">


                    <div id="section-features" class="heading-block center">
                        <h2 class="newprime">Our Current Listings</h2>
                        <span class="divcenter">Below you can filter and find all the listings we have to offer.</span>
                    </div>


                </div> -->

                <div class="clear"></div>

                <!-- Portfolio Items
                ============================================= -->
                <div id="portfolio" class="portfolio grid-container clearfix">

                <article class="portfolio-item tenm2 fifteenm2 twentym2 p500 p550 p600 west">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                            <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns1-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns2-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns3-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/5042ns/5042ns4-min.jpg" alt="Shake It"></a></div> 
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                    <a href="images/portfolio/5042ns/5042ns1.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/5042ns/5042ns2.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/5042ns/5042ns3.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/5042ns/5042ns4.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>   
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Tobias Asserlaan</a></h3>
                            <span><a href="#">20m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;500,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">West</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 twentym2 p550 p600 west">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room5-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room6-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room7-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room8-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room5.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room6.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room7.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room8.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Statentlaan</a></h3>
                            <span><a href="#">20m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;550,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">West</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 p500 p550 p600 south">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room9-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room10-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room11-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room12-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room9.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room10.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room11.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room12.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Broekhovenseweg</a></h3>
                            <span><a href="#">15m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;500,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">South</a></span>
                        </div>
                    </article>

                    <article class="portfolio-item tenm2 fifteenm2 twentym2 twentyfivem2 p550 p600 south">
                        <div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-pause="10000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room13-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room14-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room15-min.jpg" alt="Shake It"></a></div>
                                        <div class="slide"><a href="http://nomadr.nl/listings/5042ns/"><img src="images/portfolio/room16-min.jpg" alt="Shake It"></a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <a href="images/portfolio/room13.jpg" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                <a href="images/portfolio/room14.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room15.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="images/portfolio/room16.jpg" class="hidden" data-lightbox="gallery-item"></a>
                                <a href="http://nomadr.nl/listings/5042ns/" class="right-icon"><i class="icon-line-ellipsis"></i></a>
                            </div>
                        </div>
                        <div class="portfolio-desc">
                            <h3><a href="http://nomadr.nl/listings/5042ns/">Valkenierstraat</a></h3>
                            <span><a href="#">25m<sup>2</sup></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">&euro;550,-</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">South</a></span>
                        </div>
                    </article>

                        </div><!-- #portfolio end -->


            </div>


        </div>

    </section><!-- #content end -->

******* ******** EDIT

你好!

我已将以下代码添加到initselect函数,现在它确实执行了过滤器。但是,不知怎的,它现​​在没有填写最后一个选择(价格)。它留空,因此也不包括在过滤器中。过滤器现在可以自动更改第一个选择。这是在js:

更改选择后在initselect函数中执行的代码
$(".combination-filter select").each(function() {
                var $this = $(this);
            // get group key
            var $buttonGroup = $this.closest('.btn-groupn');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[ filterGroup ] = $this.find('option:selected').attr('data-filter');
            // combine filters
            var filterValue = concatValues( filters );
            $container.isotope({ filter: filterValue });


            return false;

            });

2 个答案:

答案 0 :(得分:2)

您需要从代码中调用post事件=&gt; .change()

如果以编程方式更改值,则更改事件不会“由浏览器调用”。

答案 1 :(得分:0)

此问题的解决方案如下。而不是

$("select[name=squarems]").val(squa);

我必须添加.change();对于initselect()函数中每个val更改的结尾。这看起来像这样(每个):

$("select[name=squarems]").val(squa).change();

不知何故,这使得它注册为一个更改,并在JS中触发了过滤器事件。

感谢大家的投入!

干杯