Question

我正在使用插件Portfilter。它适用于IE，FF中的select标签，但不适用于Chrome。谁知道什么是错的？

JS

$('select#car_value').change(function(){
  $.fn.portfilter(this.options[this.selectedIndex]);
});

HTML

<select id="car_value">
    <option value="abarth" data-toggle="portfilter" data-target="abarth">Abarth</option>
</select>

PS。我有超过30个选项标签，这个只是例如

Example

Answer 1

我将javascript部分更改为：

$('select#car_value').change(function(){
  $(":selected", this).portfilter('filter');
});

这也包含在插件初始化部分中，并且有效。

笔：https://codepen.io/anon/pen/mqWROK

Answer 2

在我看来，你的改变功能正常。问题似乎与$ .fn.portfilter函数有关。你有正确的图书馆吗？当我从codepen中复制所有代码时，它似乎显示如下所示的错误，但是当您从https://github.com/geedmo/portfilter添加portfilter js文件时，错误已得到修复。我认为你的问题只是你没有添加必要的portfilter标签。

$('select#car_value').change(function(){
  alert("change")
  $.fn.portfilter(this.options[this.selectedIndex]);
});

.info-text h4+p {
    font-size: 1.4em;
    line-height: 1;
    font-weight: 600;
    color: #ed1c24;
    margin-top: 0;
    margin-bottom: 16px;
}

.car-item, .news-item, .testimonials-item {
    width: calc(33% - 20px);
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-toggle="portfilter" data-target="all">all</li>
<li data-toggle="portfilter" data-target="bmw">bmw</li>
<li data-toggle="portfilter" data-target="mercedes">mercedes</li>
</ul>

<select id="car_value">
<option data-toggle="portfilter" data-target="all">all</option>
<option data-toggle="portfilter" data-target="bmw">bmw</option>
<option data-toggle="portfilter" data-target="mercedes">mercedes</option>
</select>

<div class="realizations-flex-row filter-row">  
    
    <div class="car car-item info-text" data-tag="">
        <a href="http://www.youtube.com/watch?v=l03dt748QdA" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/l03dt748QdA/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>Honda Civic Type R</h2>
        <h4>2007 r.</h4>
        <p>11.450 euro</p>
    </div>
    
    
    <div class="car car-item info-text" data-tag="">
        <a href="http://www.youtube.com/watch?v=3M6CiDlPw4U" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/3M6CiDlPw4U/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>Mitsubishi Outlander 2.0</h2>
        <h4>2006 r.</h4>
        <p>8.500 euro</p>
    </div>
    
    
    <div class="car car-item info-text" data-tag="">
        <a href="http://www.youtube.com/watch?v=_n8qfhunXbU" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/_n8qfhunXbU/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>Opel Zafira 1.8 Benzyna</h2>
        <h4>2008 r.</h4>
        <p>8.750 euro</p>
    </div>
    
    
    <div class="car car-item info-text" data-tag="mercedes">
        <a href="http://www.youtube.com/watch?v=4OVM_GihMRk" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/4OVM_GihMRk/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>Mercedes-Benz S350</h2>
        <h4>2012 r.</h4>
        <p>35.800 euro</p>
    </div>
    
    
    <div class="car car-item info-text" data-tag="mercedes">
        <a href="http://www.youtube.com/watch?v=nRMn5RypJbk" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/nRMn5RypJbk/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>Mercedes-Benz 123</h2>
        <h4>1981 r.</h4>
        <p>5.800 euro</p>
    </div>
    
    
    <div class="car car-item info-text" data-tag="bmw">
        <a href="http://www.youtube.com/watch?v=82LUEyq4Nvc" target="_blank">
            <div class="car-background" style="background-image: url('https://img.youtube.com/vi/82LUEyq4Nvc/maxresdefault.jpg');">
                <i class="flaticon-play-button"></i>
            </div>
        </a>
        <h2>BMW 520d</h2>
        <h4>2013 r.</h4>
        <p>36.450 euro</p>
    </div>
    </div>

Answer 3

在创建两个或更多选项后，您只有one option value值，这就是为什么change event no work

它的工作

$('select#car_value').change(function() {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="car_value">
    <option value="abarth" data-toggle="portfilter" data-target="abarth">Abarth</option>
    <option value="abarth" data-toggle="portfilter" data-target="abarth">Abarth</option>
</select>

功能不适用于chrome

3 个答案: