Сортировка Javascript работает в Firefox, а не в Chrome

Question

Сортировка Javascript работает в Firefox, но не в Chrome.Простой выбор, который переносит пользователя на новый URL.Какие изменения можно внести, чтобы он работал во всех браузерах?

Stackoverflow говорит, что мне нужно больше текста объяснения.Хотя я подумал, что это довольно простой вопрос.Пользователь выбирает опцию и направляется на новый URL.Код перенаправляет в Firefox, но не перенаправляет в Chrome.Я не проверял другие браузеры.

function url() {
  var value1 = $("#sort").val();
  var currentURL = window.location.href;

  if (window.location.href.endsWith("/")) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');

  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');

  } else {
    var str1 = (currentURL + '&');
  }


  if (value1 == 'sort1') {
    window.location.href = str1 + "orderby=date&order=dsc";
  }
  if (value1 == 'sort3') {
    window.location.href = str1 + "orderby=date&order=asc";
  }
  if (value1 == 'sort5') {
    window.location.href = str1 + "orderby=title&order=dsc";
  }
  if (value1 == 'sort7') {
    window.location.href = str1 + "orderby=title&order=asc";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1" onclick="url()">Latest</option>
  <option class="sorts-option" value="sort3" onclick="url()">Oldest</option>
  <option class="sorts-option" value="sort5" onclick="url()">Title DSC</option>
  <option class="sorts-option" value="sort7" onclick="url()">Title ASC</option>
</select>

Answer 1

Вместо добавления события «Onclick» к каждой опции используйте событие «OnChange» для выбора.тогда он будет работать автоматически.<select id="sort" class="sorts2" onChange="url()"> <option class="sorts-option" value="">Sort</option> <option class="sorts-option" value="sort1" >Latest</option> <option class="sorts-option" value="sort3" >Oldest</option> <option class="sorts-option" value="sort5" >Title DSC</option> <option class="sorts-option" value="sort7" >Title ASC</option> </select>

попробуйте это.

Answer 2

Учитывая, что вы используете jQuery, лучше использовать jQuery.change () :

$('#sort').change(function () {
  var value1 = this.value;
  var currentURL = window.location.href;

  if (window.location.href.endsWith('/')) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');
  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');
  } else {
    var str1 = (currentURL + '&');
  }

  if (value1 == 'sort1') {
    str1 += 'orderby=date&order=dsc';
  }
  if (value1 == 'sort3') {
    str1 += 'orderby=date&order=asc';
  }
  if (value1 == 'sort5') {
    str1 += 'orderby=title&order=dsc';
  }
  if (value1 == 'sort7') {
    str1 += 'orderby=title&order=asc';
  }
  
  console.log(str1);
  // window.location.href = str1;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1">Latest</option>
  <option class="sorts-option" value="sort3">Oldest</option>
  <option class="sorts-option" value="sort5">Title DSC</option>
  <option class="sorts-option" value="sort7">Title ASC</option>
</select>

Answer 3

Вы должны сделать onchange для выбора, а не onclick для тегов опции.(В качестве выбора выбран фактический элемент управления вводом, и вам нужно привязать событие только к тегу select.

Как это

function url() {
  var value1 = $("#sort").val();
  var currentURL = window.location.href;

  if (window.location.href.endsWith("/")) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');

  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');

  } else {
    var str1 = (currentURL + '&');
  }


  if (value1 == 'sort1') {
    window.location.href = str1 + "orderby=date&order=dsc";
  }
  if (value1 == 'sort3') {
    window.location.href = str1 + "orderby=date&order=asc";
  }
  if (value1 == 'sort5') {
    window.location.href = str1 + "orderby=title&order=dsc";
  }
  if (value1 == 'sort7') {
    window.location.href = str1 + "orderby=title&order=asc";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2" onchange="url()">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1" >Latest</option>
  <option class="sorts-option" value="sort3" >Oldest</option>
  <option class="sorts-option" value="sort5" >Title DSC</option>
  <option class="sorts-option" value="sort7" >Title ASC</option>
</select>

Answer 4

Выбор <option> не вызовет событие click в Chrome.Попробуйте прослушать событие change на <select> вместо:

$('#sort').on('change', url);

function url(e) {
  console.log('url running');
  var value1 = $("#sort").val();
  var currentURL = window.location.href;

  if (window.location.href.endsWith("/")) {
    var str1 = (currentURL + '?');
  } else if (window.location.href.includes('&orderby')) {
    var str1 = (currentURL.split('&orderby')[0] + '&');

  } else if (window.location.href.includes('?orderby')) {
    var str1 = (currentURL.split('?orderby')[0] + '?');

  } else {
    var str1 = (currentURL + '&');
  }

  console.log('insert code to assign to window.location.href here...');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort" class="sorts2">
  <option class="sorts-option" value="">Sort</option>
  <option class="sorts-option" value="sort1">Latest</option>
  <option class="sorts-option" value="sort3">Oldest</option>
  <option class="sorts-option" value="sort5">Title DSC</option>
  <option class="sorts-option" value="sort7">Title ASC</option>
</select>