Как извлечь данные из select с помощью name и обработать?
Доброго времени суток,
Есть селект <select name="xfield[tarif]"> <option value="0">Старт</option> <option value="1">Стандарт</option> <option value="2">Мегадарт</option> </select> Нужно извлечь активное значение и сравнить. Никак не могу извлечь данные, так как требуется ID.. Без него совсем не получится? Пробовал подставлять вниз value, то тоже не находит. Извлечь нужно само слово в переменную. Потом в зависимости от значения перевести в цифру.. Цифра в яйце))) через span вывести. И чтобы при каждом изменении селекта значение обновлялось. |
var select = document.querySelector('[name=xfield\\[tarif\\]]');
select - это список, далее можно работать с ним. Что значит текст, который переводить с цифру, загадка. Например select.value - это значение списка, то есть выбранной опции в нем, по индексу выбранной опции можно получить и текст ее. |
спасибо, сейчас попробую..
по второму имел ввиду условие if.. Если это старт, то получаем 20.. if atxt='Старт' then aprice='20' |
Добрый вечер,
Если правильно вас понял, то будет так: На событие '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;
}
});
});
|
Примерно так..
Есть селектор и спан.. В зависимости от выбранного значения в селекторе должен меняться текст на лету. сейчас попробую понять как это работает |
Почему-то свитч не работает.. Я пока так стянул
var element = document.getElementById("id1"); var tarif = select.value; if (tarif == 0) element.innerHTML = "20 рублей"; Но нужно через change меняется, при смене значения селекта на сайте уже ничего не меняется. |
Я вам полное решение привел, которое работает без аргументов value в html-коде. Я протестировал.
Честно говоря не очень понимаю отрывки кода, не могли бы привести весь последний код который вы придумали. |
tolstj, ага спасибо.. код работает.. Только вставить конечно нужно value:0,1,2 и тп.. Только при первом подключении он не активен, нужно со значения по умолчанию переключить на другое, и только потом на первое опять.. Ну с этим кое что сейчас сделаю.
|
Мой код написан на 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>
|
Так и вставлял.. Просто не работал, заменил текстовое значение на value и сработало.. Не сразу заметил, что работает.. Так как первичное значение не меняется, потом подумал тут же change и поменял. :lol:
Спасибо! |
| Часовой пояс GMT +3, время: 11:48. |