Форум

berman · #1 (**permalink**) 17.10.2020, 19:30

Доброго времени суток,

Есть селект
<select name="xfield[tarif]">
<option value="0">Старт</option>
<option value="1">Стандарт</option>
<option value="2">Мегадарт</option>
</select>

Нужно извлечь активное значение и сравнить. Никак не могу извлечь данные, так как требуется ID.. Без него совсем не получится? Пробовал подставлять вниз value, то тоже не находит.

Извлечь нужно само слово в переменную. Потом в зависимости от значения перевести в цифру.. Цифра в яйце))) через span вывести. И чтобы при каждом изменении селекта значение обновлялось.

laimas · #2 (**permalink**) 17.10.2020, 19:42

var select = document.querySelector('[name=xfield\\[tarif\\]]');

select - это список, далее можно работать с ним. Что значит текст, который переводить с цифру, загадка. Например select.value - это значение списка, то есть выбранной опции в нем, по индексу выбранной опции можно получить и текст ее.

berman · #3 (**permalink**) 17.10.2020, 20:08

спасибо, сейчас попробую..

по второму имел ввиду условие if.. Если это старт, то получаем 20.. if atxt='Старт' then aprice='20'

tolstj · #4 (**permalink**) 17.10.2020, 20:11

Добрый вечер,

Если правильно вас понял, то будет так:

На событие 'change' элемента select будет обновляться значение innerHTML элемента span.

Получение элемента select взял у предыдущего комментатора.
Span получен как первый на странице, при необходимости получаете его другим способом.

Здесь взято свойство select.value, но если хотите можете взять свойство select.selectedIndex, который будет у вас в зависимости от выбранной опции: 0, 1, 2.

window.addEventListener('load', () => {
    let selectObj = document.querySelector('[name=xfield\\[tarif\\]]');
    let spanForChange = document.getElementsByTagName('span')[0];

    selectObj.addEventListener('change', () => {
        let selectedValue = selectObj.value;
        switch (selectedValue) {
            case 'Старт':
                spanForChange.innerHTML = 10;
                break;
            case 'Стандарт':
                spanForChange.innerHTML = 150;
                break;
            case 'Мегадарт':
                spanForChange.innerHTML = 1000000;
                break;
        }
    });
});

berman · #5 (**permalink**) 17.10.2020, 20:35

Примерно так..
Есть селектор и спан.. В зависимости от выбранного значения в селекторе должен меняться текст на лету. сейчас попробую понять как это работает

berman · #6 (**permalink**) 17.10.2020, 20:48

Почему-то свитч не работает.. Я пока так стянул
var element = document.getElementById("id1");
var tarif = select.value;
if (tarif == 0) element.innerHTML = "20 рублей";

Но нужно через change меняется, при смене значения селекта на сайте уже ничего не меняется.

tolstj · #7 (**permalink**) 17.10.2020, 20:54

Я вам полное решение привел, которое работает без аргументов value в html-коде. Я протестировал.

Честно говоря не очень понимаю отрывки кода, не могли бы привести весь последний код который вы придумали.

berman · #8 (**permalink**) 17.10.2020, 21:00

tolstj, ага спасибо.. код работает.. Только вставить конечно нужно value:0,1,2 и тп.. Только при первом подключении он не активен, нужно со значения по умолчанию переключить на другое, и только потом на первое опять.. Ну с этим кое что сейчас сделаю.

tolstj · #9 (**permalink**) 17.10.2020, 21:07

Мой код написан на JavaScript и его недостаточно просто скопировать в файл с расширением .html

Но если вы так хотите, то вот вариант который просто необходимо вставить в пустой html файл:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Prog</title>
</head>
<body>
    <select name="xfield[tarif]">
        <option selected>Старт</option>
        <option >Стандарт</option>
        <option >Мегадарт</option>
        </select>
    <span></span>
    <script>
        window.addEventListener('load', () => {
            let selectObj = document.querySelector('[name=xfield\\[tarif\\]]');
            let spanForChange = document.getElementsByTagName('span')[0];
            selectObj.addEventListener('change', () => {
                let selectedValue = selectObj.value;
                switch (selectedValue) {
                    case 'Старт':
                        spanForChange.innerHTML = 10;
                        break;
                    case 'Стандарт':
                        spanForChange.innerHTML = 150;
                        break;
                    case 'Мегадарт':
                        spanForChange.innerHTML = 1000000;
                        break;
                }
            });
        });
    </script>
</body>
</html>

berman · #10 (**permalink**) 17.10.2020, 21:15

Так и вставлял.. Просто не работал, заменил текстовое значение на value и сработало.. Не сразу заметил, что работает.. Так как первичное значение не меняется, потом подумал тут же change и поменял.

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript