Страница загружается постоянно, когда я выбираю вариант с помощью jQuery ddSlick JS

Question

Я использую этот плагин для отображения флажков раскрывающегося списка на моем веб-сайте:

designwithp c .com / Plugins / ddSlick

Теперь код HTML вот так:

<?php   
$object   = get_queried_object();
$slug     = $object->slug;
?>
<select id="countryFlags">
     <option value="">--Choose Country--</option>
     <option value="somalia" <?php if( isset( $slug ) && $slug == 'somalia' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/somalia-2.svg" data-description="&nbsp;">Somalia</option>
     <option value="ethiopia" <?php if( isset( $slug ) && $slug == 'ethiopia' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/ethiopia-1.svg"  data-description="&nbsp;">Ethiopia</option>
     <option value="kenya" <?php if( isset( $slug ) && $slug == 'kenya' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/kenya-1.svg"  data-description="&nbsp;">Kenya</option>
     <option value="somaliland" <?php if( isset( $slug ) && $slug == 'somaliland' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/somaliland-1.svg"  data-description="&nbsp;">Somaliland</option>
     <option value="djibouti" <?php if( isset( $slug ) && $slug == 'djibouti' ) echo 'selected="selected"'; ?> data-imagesrc="//mysite.com/wp-content/uploads/2020/07/djibouti.png"  data-description="&nbsp;">Djibouti</option>
</select>

и jQuery код

$('#countryFlags').ddslick({    
     width:150,    
     selectText: 'Select your preferred social network',
     imagePosition:'left',
     defaultSelectedIndex : null,
     onSelected: function(selectedData){
          if( selectedData.selectedData.value) {
               console.log( selectedData.selectedData.value );
               window.location.href = 'mysite.com/advert-location/'+selectedData.selectedData.value;
          }
     }   
});

Что мне нужно:

Я хочу, чтобы когда люди выбирали любой вариант, он перенаправлялся на URL + выбранное значение

Например, вы выбираете Кению, тогда он должен перенаправлять вам на этот URL:

mysite.com / Advert-location / kenya

Теперь Как вы можете видеть в скрипте, это по умолчанию получает значение выбранной опции, когда страница загружается, поэтому моя страница постоянно загружается и загружается с моим заданным условием в части jQuery.

Она должна быть загружена один раз.

Что-то мне не хватает?

Answer 1

У меня есть поиск, но я не нашел ни одного события change, которое можно применить к ddSlick, поэтому в качестве альтернативы вы можете использовать localStorage и сохранять в нем какое-то значение всякий раз, когда ваша страница загружается для в первый раз и проверьте, равно ли значение в хранилище null или нет, в зависимости от того, что вы можете перенаправить на другую страницу.

Ваш код jquery будет выглядеть следующим образом:

$(document).ready(function() {

  localStorage.clear(); //clear previous data on page load

  $('#countryFlags').ddslick({
    width: 150,
    selectText: 'Select your preferred social network',
    imagePosition: 'left',
    defaultSelectedIndex: null,
    onSelected: function(selectedData) {
      if (selectedData.selectedData.value) {
        console.log(selectedData.selectedData.value);
        checking(selectedData.selectedData.value); //call function
      }
    }
  });


  function checking(value) {
    //if there is no value in localStorage
    if (localStorage.getItem("save") == null) {
      //don't redirect
      console.log("i am in don't redirect")
      var save = "firsttime";
      console.log(save);
      localStorage.setItem("save", save); //add data to storage


    } else {
      console.log("i am in redirect");
      //redirect
      window.location.href = 'mysite.com/advert-location/' + value;

    }

  }
})