how can i set default result on jquery with dropdown filter in every load page?

how can i set default result on jquery with dropdown filter in every load page? in my case, i want to show one of the result of my filter in everytime i load the page. but unfortunately, it doesnt. you have to select the filter first, then come the result. here is my code:

$('#preference, #style').on('change', function(){
    var preference = $('#preference');
    var style = $('#style');
    
    if ( preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0 ) {
        $('.result.active').removeClass('active');
        $('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');            
    }
    
});

.result {
  display: none;
}

.result.active {
  display: block;
}
.kontener {
  display: flex;
  width: 100%;

}

.kontener1 {
  display: flex;
  width: 50%;
  margin-bottom: 20px;

}

.baris {
  flex: 50%;
  margin: 0 3%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="kontener">
  <div class="baris">
    <div class="kontener1">
      <div class="kota">
        <h3 class="judul3">
        City
        </h3>
        <select id="preference">
          <option value="select">select</option>
          <option value="Jakarta">Jakarta</option>
          <option value="Bandung">Bandung</option>
          <option value="Surabaya">Surabaya</option>
          <option value="Makassar">Makassar</option>
          <option value="Bali">Bali</option>
          <option value="Gresik">Gresik</option>
          <!--<option value="Bogor">Bogor</option>-->
          <option value="Malang">Malang</option>
          <option value="Sidoarjo">Sidoarjo</option>
        </select>
      </div>
      <div class="jenis">
        <h3 class="judul3">
          Type
        </h3>
        <select id="style">
          <option value="select">select</option>
            <option value="Retail">Retail Store</option>
            <option value="Modern">Modern Store</option>
            <option value="System">System Integrator</option>
            <option value="Audio">Audio Video / Home Theater Specialist</option>
          </select>
        </div>
    </div>
  </div>
</div>
<div class="result" data-preference="Jakarta" data-style="Retail">
jakarta retail
</div>

here are my fiddle: https://jsfiddle.net/adenoe/fb7qmzeh/28/

please, help me.

the result i want is, one of the filter result was show in everytime i load the page without i have to choose the dropdown.

Solution

From what I understood you want to do two things

set a default value for both the select fields on page load.
trigger the action associated with the values

For the first part, the easiest is to set the selected value in html

<!-- first select field -->
<option value="Bandung" selected>Bandung</option>

<!-- second select field -->
<option value="Retail" selected>Retail Store</option>

Just add the 'selected' attribute to the option you want as default. Go for this if the selected value is always the same and isn't dependent on some other factor.

If you want to set the selected value dynamically, set in via javascript.

// first select field
$('#preference').val('Bandung');

// second select field
$('#style').val('System');

Now for the second part, call a trigger change function at the end of the js file or document.ready, this will apply your function and give intended behaviour. You only need to call it for one field, because it's a common handler for both.

// on load trigger change
$('#preference').trigger('change');

Here's a fork of your bin with the change: https://jsfiddle.net/s213zdqr/