Изменить конкретный параметр в URL-адресе на основе выбора раскрывающегося списка с помощью JavaScript

Я создал 2 раскрывающихся списка, как показано ниже.

function selectCar(obj){
    var urlString = "/";
    var selectedCar = obj.options[obj.selectedIndex];
    if (selectedCar.value != "nothing"){
            window.location = window.location + selectedCar.value;
    }
}


<select name = "selectcar1" onchange = "selectCar(this)">
<option value = "1234">audi</option>
<option value = "3256">bmw</option>
<option value = "7890">mercedes</option>
</select>


<select name = "selectcar2" onchange = "selectCar(this)">
<option value = "5461">mazda</option>
<option value = "3578">renault</option>
<option value = "1247">ferrari</option>
</select>

для редактирования параметров этого URL-адреса на основе выбора.

example.com/compare?car1=1740&car2=1684

Таким образом, если пользователь выбирает автомобиль из selectcar1, автомобиль1 в URL-адресе изменяется, а когда изменяется selectcar2, затрагивается автомобиль2.

В настоящее время я добавляю новое значение в URL-адрес, я не заменяю конкретную переменную. Как я могу это сделать?

javascript jquery

06.04.2019 21:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

window.location = some/url; немедленно перенаправляет запрос на этот новый URL. Если вы хотите, чтобы сравнивать имел два (или более) параметра, вам нужно дождаться получения этих параметров.
Также объект location имеет ряд свойств, а именно protocol, host, pathname, search и другие.
Итак, для ОП сценарий может выглядеть так.

var car1 = 0;
var car2 = 0;

function selectCar(obj) {
  if (obj.name === 'selectcar1')
    car1 = obj.value;
  else
    car2 = obj.value;
  if (car1 && car2) { // both are > 0
    var newUrl = location.protocol + '//' + location.host + location.pathname + '?car1=' + car1 + '&car2=' + car2;
    console.info(newUrl);
    //location = newUrl;
  }
}

<select name = "selectcar1" onchange = "selectCar(this)">
  <option value = "0">Select</option>
  <option value = "1234">audi</option>
  <option value = "3256">bmw</option>
  <option value = "7890">mercedes</option>
</select>


<select name = "selectcar2" onchange = "selectCar(this)">
  <option value = "0">Select</option>
  <option value = "5461">mazda</option>
  <option value = "3578">renault</option>
  <option value = "1247">ferrari</option>
</select>

06.04.2019 22:20

Использование URL API упрощает это.

Передавая href текущей страницы, вы можете устанавливать или обновлять параметры, сохраняя при этом существующие.

function selectCar(sel){

    var url = new URL(location.href);

    if (sel.value){
      url.searchParams.set(sel.id, sel.value)
      window.location.search = url.search
    }
}

Примечание. Я добавил идентификатор для выбора: <select id = "car1" onchange = "selectCar(this)"/>

DEMO

06.04.2019 23:21