Преобразование скрипта Jquery в Javascript

Я вижу три проблемы (возможно, только две):

1. document.querySelector(this) передает объект элемента в querySelector. Вы не можете этого сделать, он принимает строки, определяющие селекторы CSS. Чтобы просмотреть элемент, на который ссылается this, используйте this.querySelector("selector string"). Но если вы хотите получить выбранный вариант из HTMLSelectElement, вы можете вместо этого использовать его массив selectedOptions.

2. option:selected зависит от jQuery. Чтобы найти первое выбранное option в select, вы можете вместо этого использовать "option:checked". Но см. № 1, вам не нужно делать это таким образом.

3. Код jQuery ожидает события windowload, а затем, избыточно, ждет, пока DOM не будет готов (что и будет; load не срабатывает до тех пор, пока это не произойдет). Ваш код ничего не делает, чтобы ждать, пока все будет готово. В наши дни, если вы используете type = "module", в этом нет необходимости, так что это может быть хорошо. Если нет, вы можете подумать об этом (модули полезны) или использовать defer для элемента script.

Вы не сказали, есть ли только один элемент или несколько, но если мы предполагаем несколько, прокрутите результат querySelectorAll, чтобы настроить обработчики:

for (const element of document.querySelectorAll("select.ddlVarianti")) {
    element.addEventListener("change", function () {
        const optionSelected = this.selectedOptions[0];
        if (optionSelected) {
            const tagliaSelected = optionSelected.text;
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                event: "GAevent",
                eventID: "13",
                eventCategory: "product",
                eventAction: "taglia",
                eventLabel: tagliaSelected,
            });
        }
    });
}

Живой пример:

for (const element of document.querySelectorAll("select.ddlVarianti")) {
    element.addEventListener("change", function () {
        const optionSelected = this.selectedOptions[0];
        if (optionSelected) {
            const tagliaSelected = optionSelected.text;
            console.info(`tagliaSelected = ${tagliaSelected}`);
            /*
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                event: "GAevent",
                eventID: "13",
                eventCategory: "product",
                eventAction: "taglia",
                eventLabel: tagliaSelected,
            });
            */
        }
    });
}

<div>
    <select class = "ddlVarianti">
        <option value = "A">Option A</option>
        <option value = "B">Option B</option>
        <option value = "C">Option C</option>
        <option value = "D">Option D</option>
    </select>
</div>
<div>
    <select class = "ddlVarianti">
        <option value = "1">Option 1</option>
        <option value = "2">Option 2</option>
        <option value = "3">Option 3</option>
        <option value = "4">Option 4</option>
    </select>
</div>