Function don't work in chrome

Question

I'm working with plugin Portfilter. It's work with select tag in IE, FF but not in Chrome. Anyone know what's wrong?

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. I have over 30 option tag, this one is only for example

---

Example

Answer 1

It looks to me like your change function is working fine. The issue seems to be with the $.fn.portfilter function. Do you have this library included correctly? It seems to show an error like shown below in the snippet when I copy all your code form the codepen, but the error is fixed when you add the portfilter js file from https://github.com/geedmo/portfilter. I think your issue is just that you did not add the necessary portfilter tags.

$('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 2

I changed the javascript part to:

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

Which was also contained in the plugin initialization part, and it worked.

Pen: https://codepen.io/anon/pen/mqWROK

Answer 3

you have only one option value value thats why change event no work after create two or more option

its 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>