Как сравнить значения select?

Question

[faleaksey]

Всем привет! Имеется следующий код:

class Filter {
    constructor() {
        this.param = this.parsUrl();
    }

    parsUrl() {
        const qd = {};

        const testUrl = '?size=L&color=1,3&manufacturer=aaa,eee';
        if (testUrl) testUrl.substr(1).split("&").forEach(function (item) {
            let s = item.split("="),
                k = s[0],
                v = s[1] && decodeURIComponent(s[1]);
            (qd[k] = qd[k] || []).push(v.split(','))
        });
        return qd;
    }

    filterInit() {

        for (let key in this.param) {

            const elValue = this.param[key][0];
            let el = document.getElementsByName(key);

            el.forEach(function (el) {
             
                switch (el.type) {
                    case 'checkbox':
                        for (let i = 0; i < elValue.length; i++) {
                            if (elValue[i].toLowerCase() === el.value.toLowerCase()) {
                                el.checked = true;
                            }
                        }
                        break;
                    case 'radio':
                        for (let i = 0; i < elValue.length; i++) {
                            if (elValue[i].toLowerCase() === el.value.toLowerCase()) {
                                el.checked = true;
                            }
                        }
                        break;
                    case 'select-multiple':
                    console.log(el.children);
                        for (let i = 0; i < elValue.length; i++) {
                            console.log(el.children[i].value);
                            console.log(el.children[i].value === elValue[i]);
                            // if (el.children[i].value === elValue[i]) {
                            //     console.log(el.children[i].value === elValue[i]);
                            // }
                        }
                        break;

                }
            });
        }
    }
}

let filter = new Filter();

filter.filterInit();

в данном контексте не получается сравнить значения select, в конструкции switch case:

switch (el.type) {
                    case 'checkbox':
                        for (let i = 0; i < elValue.length; i++) {
                            if (elValue[i].toLowerCase() === el.value.toLowerCase()) {
                                el.checked = true;
                            }
                        }
                        break;
                    case 'radio':
                        for (let i = 0; i < elValue.length; i++) {
                            if (elValue[i].toLowerCase() === el.value.toLowerCase()) {
                                el.checked = true;
                            }
                        }
                        break;
                    case 'select-multiple':
                    console.log(el.children);
                        for (let i = 0; i < elValue.length; i++) {
                            console.log(el.children[i].value);
                            console.log(el.children[i].value === elValue[i]);
                            // if (el.children[i].value === elValue[i]) {
                            //     console.log(el.children[i].value === elValue[i]);
                            // }
                        }
                        break;

                }

что не так?

https://jsfiddle.net/sdL2zq8h/

Answer 1

[0xD34F]

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

for (const n of el.options) {
  for (const m of elValue) {
    if (n.value === m) {
      n.selected = true;
      break;
    }
  }
}

Хотя в явном виде можно и ни одного не написать:

Array.prototype.forEach.call(
  el,
  n => n.selected = elValue.includes(n.value)
);

А можно (но не нужно) ничего не сравнивать, если собрать из массива значений селектор:

el
  .querySelectorAll(elValue.map(n => `[value="${n}"]`))
  .forEach(n => n.selected = true);