Как добавить несколько параметров из выпадающих списков в URL с помощью JavaScript, убрав значения undefined?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с формированием URL на основе выбранных значений из нескольких выпадающих списков. Я использую JavaScript для этого, но столкнулся с парочкой неприятных моментов.

Во-первых, если пользователь выбирает значение во втором списке, но оставляет первый пустым, в URL появляется name=undefined для первого параметра. Почему-то это происходит только с первым списком, остальные просто не добавляются в URL, если не выбраны.

Во-вторых, если опция предварительно выбрана с помощью атрибута selected в HTML, скрипт ее игнорирует.

Вот пример кода, который я использую:

var filters = [,];

function changeURL(a) {
    var yourUrl = "https://example.com";
    filters[a] = document.getElementById(a).value;
    var preFilter = "?";
    for(var i=0; i<filters.length; i++) {
        aName = document.getElementById(i).name;
        yourUrl += preFilter + aName + "=" + filters[i];
        preFilter = "&";  
    }
    document.getElementById("result").innerHTML = yourUrl;
}

Как можно изменить этот код, чтобы решить обе проблемы? Буду очень благодарен за помощь!

2

слушай, я тоже сталкивался с похожей проблемой. вот что помогло мне:

используй Object.fromEntries() и Array.from() чтобы собрать все значения в объект. потом фильтруй пустые значения. примерно так:

const params = Object.fromEntries(
Array.from(document.querySelectorAll(‘select’))
.filter(s => s.value)
.map(s => [s.name, s.value])
);

const url = new URL(‘https://example.com’);
url.search = new URLSearchParams(params);

document.getElementById(‘result’).textContent = url;

этот подход учитывает все выбраные значения и не добавляет undefined. надеюсь, поможет!

3

Могу поделиться своим опытом. Я обычно использую URLSearchParams для таких задач - он автоматически пропускает undefined значения. Вот рабочий вариант:

function updateURL() {
const selects = document.querySelectorAll(‘select’);
const params = new URLSearchParams();

selects.forEach(select => {
if (select.value) params.append(select.name, select.value);
});

const url = https://example.com?${params.toString()};
document.getElementById(‘result’).textContent = url;
}

Этот код учитывает все выбранные значения, включая предустановленные. Просто вызывай updateURL() при изменении любого списка.

4

Чтобы решить эти проблемы, советую изменить подход. Вместо массива filters, лучше использовать объект и добавлять только выбранные значения. Можно также проверять значение по умолчанию при загрузке страницы. Примерно так:

function changeURL() {
const filters = {};
const selects = document.querySelectorAll(‘select’);
selects.forEach(select => {
if (select.value) filters[select.name] = select.value;
});
const params = new URLSearchParams(filters);
document.getElementById(‘result’).textContent = https://example.com?${params};
}

Этот код должен решить обе проблемы. Попробуй и дай знать, если что-то не так!