Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.10.2020, 19:30
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

Как извлечь данные из select с помощью name и обработать?
Доброго времени суток,

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

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

Извлечь нужно само слово в переменную. Потом в зависимости от значения перевести в цифру.. Цифра в яйце))) через span вывести. И чтобы при каждом изменении селекта значение обновлялось.
Ответить с цитированием
  #2 (permalink)  
Старый 17.10.2020, 19:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,734

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


select - это список, далее можно работать с ним. Что значит текст, который переводить с цифру, загадка. Например select.value - это значение списка, то есть выбранной опции в нем, по индексу выбранной опции можно получить и текст ее.
Ответить с цитированием
  #3 (permalink)  
Старый 17.10.2020, 20:08
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

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

по второму имел ввиду условие if.. Если это старт, то получаем 20.. if atxt='Старт' then aprice='20'
Ответить с цитированием
  #4 (permalink)  
Старый 17.10.2020, 20:11
Новичок на форуме
Отправить личное сообщение для tolstj Посмотреть профиль Найти все сообщения от tolstj
 
Регистрация: 02.09.2020
Сообщений: 4

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

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

На событие '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;
        }
    });
});

Последний раз редактировалось tolstj, 17.10.2020 в 20:17. Причина: Написал бред
Ответить с цитированием
  #5 (permalink)  
Старый 17.10.2020, 20:35
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

Примерно так..
Есть селектор и спан.. В зависимости от выбранного значения в селекторе должен меняться текст на лету. сейчас попробую понять как это работает
Ответить с цитированием
  #6 (permalink)  
Старый 17.10.2020, 20:48
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

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

Но нужно через change меняется, при смене значения селекта на сайте уже ничего не меняется.
Ответить с цитированием
  #7 (permalink)  
Старый 17.10.2020, 20:54
Новичок на форуме
Отправить личное сообщение для tolstj Посмотреть профиль Найти все сообщения от tolstj
 
Регистрация: 02.09.2020
Сообщений: 4

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

Честно говоря не очень понимаю отрывки кода, не могли бы привести весь последний код который вы придумали.
Ответить с цитированием
  #8 (permalink)  
Старый 17.10.2020, 21:00
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

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

Последний раз редактировалось berman, 17.10.2020 в 21:10.
Ответить с цитированием
  #9 (permalink)  
Старый 17.10.2020, 21:07
Новичок на форуме
Отправить личное сообщение для tolstj Посмотреть профиль Найти все сообщения от tolstj
 
Регистрация: 02.09.2020
Сообщений: 4

Мой код написан на 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>
Ответить с цитированием
  #10 (permalink)  
Старый 17.10.2020, 21:15
Новичок на форуме
Отправить личное сообщение для berman Посмотреть профиль Найти все сообщения от berman
 
Регистрация: 17.10.2020
Сообщений: 8

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать данные из одинаковых форм php скрипту через AJAX? griga999 AJAX и COMET 28 10.10.2016 06:09
Как обработать переданные функции параметры как массив? javascript_pupil Общие вопросы Javascript 7 19.08.2016 13:59
Как из php файла передать данные в переменную javascript angelzzz Общие вопросы Javascript 36 01.07.2016 15:54
Как обработать данные объекта не используя ng-repeat Joannes Angular.js 1 23.10.2014 21:58
Как вывести данные из PHP Sherminator Events/DOM/Window 2 07.08.2012 19:11