как получить значение select js
Чтобы получить значение выбранного элемента select в JavaScript, можно использовать свойство value у выбранного элемента. Например:
const select = document.querySelector('select'); // выбираем элемент select const selectedValue = select.value; // получаем значение выбранного элемента Здесь мы выбираем элемент select и затем получаем его значение, используя свойство value .
Курсы javascript
извините. не так скопировала сюда, потому что уже здесь в коде изменяла имена переменных на нормальные
в Sublime написано правильно sel.options[sel.selectedIndex].value и все равно не работает такая запись
15.10.2017, 14:52
Новичок на форуме
Регистрация: 15.10.2017
Сообщений: 4
15.10.2017, 16:24
Регистрация: 27.05.2010
Сообщений: 33,009
Alla963,
select а не sel
15.10.2017, 16:55
Новичок на форуме
Регистрация: 15.10.2017
Сообщений: 4
почему select, а не sel?
я имею в виду, что изначально было так:
var sel = document.getElementById(«select_»);
var val = sel.options[sel.selectedIndex].value;
alert(val);
а затем я здесь в редакторе меняла sel на select и val на value, но забыла поменять в том месте
Как получить value из option на чистом JS?
Делаю блок калькулятора на чистом JS. Столкнулась с проблемой, что не могу получить значение value в option. Как вариант, получилось только через onchange в html, но знаю, что это костыль, поэтому интересует правильное решение.
var select = document.getElementById('agriculture'); selectFunction = function()
Потом эти значения буду использовать в формуле.
Отслеживать
5,980 1 1 золотой знак 19 19 серебряных знаков 26 26 бронзовых знаков
задан 6 сен 2019 в 8:46
Oksana Kirichuk Oksana Kirichuk
55 1 1 серебряный знак 5 5 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Это не костыль, просто иногда бывает неудобно редактировать JS-функции в HTML. К тому же, где-то в другом месте кода если захочется добавить еще одно событие onchange на этот элемент, новый будет работать, а предыдущий — перестанет. В целом, полезнее использовать addEventListener
var select = document.getElementById('agriculture'); select.addEventListener('change', function()< var getValue = this.value; // this в этом контексте - элемент, который запустил фукнцию. То же, что и select.value; console.log( getValue ); >); Тотальное руководство по элементу Select в JavaScript
Сегодня я расскажу все про элемент select. Вы научитесь:
- получать value выбранного значения
- получать текст выбранного значения
- получать все option select
- изменять выбранное значение через JS
- задавать выбранное значение по умолчанию
- создавать select через JavaScript на основе объекта
- разберемся в порядке отображения option
- научимся управлять порядком отображения option через JS
- научимся создавать select с заданным порядком option c помощью массива
- добавлять дополнительные атрибуты к option
Немало. Все это позволит закрыть любые кейсы по применению select во фронтенде. Потратим 15 минут на обучение? Риторический вопрос, поехали.
Получаем значение value из select
Самый простой пример, получить значение value выбранного элемента select . Здесь все достаточно просто, допустим в HTML такой код:
Для получения значения можно сделать так:
const select = document.querySelector('.select-1'); select.onchange = function()
Почему я люблю данный пример? Все просто, данный select показывает разницу между логикой программы и представлением (видом). Пользователь видит текст: Two, Three, а программа работает с 222, 333, 444. С одной стороны это очевидно, но с другой стороны в сложных программах модель данных будет отличаться от того, что видят пользователи, и отличаться очень сильно. Допустим крестики-нолики программируется с помощью массивов и внешний вид данных в программе совсем не похож на игру.
Такое расхождение между ВИДОМ и МОДЕЛЬЮ заложено уже здесь. Но что же делать если из select нужно срочно получить именно текст, а не value ?
Получаем текст выбранного option из select
Итак, нужен текст и никак иначе. Пусть верстка остается аналогичной. Для начала научимся получать номер (индекс) выбранного option:
// индекс выбранного option let selectedIndex = select.selectedIndex;супер, теперь получим коллекцию всех option :
let options = select.options;Если есть коллекция и индекс, то дальше все просто. Выбранный option со всеми атрибутами будет:
options[selectedIndex]если нам нужно текст, то
let text = options[selectedIndex].textContent; console.log(text);Даже value можно вытянуть, хотя (см. самое начало статьи) есть и более простые пути:
let value = options[selectedIndex].value; console.log(value);Как задать активный option в select
Посмотрите на страницу. Какой option выводится в select? Тот, который прописан первым в верстке. Но это не всегда удобно. Научимся задавать то значение, которое нужно нам.
Для начала сделаем так, чтобы нужное значение стояло по умолчанию. Для этого добавим атрибут selected в верстку и проверим.
теперь Four будет выбран при загрузке страницы. Отлично, но можно ли задать выбранное значение с помощью JavaScript? Да, просто присвоим нужный value :
const select = document.querySelector('.select-1'); select.value = 555;и select автоматически сделает активным option с этим value .
Задать пустое значение при загрузке
Допустим вы не хотите задавать какой-то option , возможно, что данные значения пользователь может пропустить — не выбирать. Как быть тогда? Применим атрибут disable:
Теперь выводится пустой option с предложением выбрать что-либо из выпадающего списка. Далее возможно реализовать два варианта:
- Заставить выбрать обязательно что-либо из списка.
- Разрешить пользователю ничего не выбирать.
Второй вариант мы уже сделали с помощью disabled, а первый будет реализован добавлением hidden атрибута. Вот так:
после того как пользователь откроет список — пустой option исчезнет, и пользователь будет обязан выбрать вариант.
Создание select с помощью JavaScript на основе объекта
Научимся создавать выпадающий список с помощью объекта. Техническая сторона довольно простая:
const city = < "756135": "Warsaw", "703448" : "Kyiv", "3067696" : "Prague", >const select4 = document.createElement('select'); for (let id in city) < console.log(id); const option = document.createElement('option'); option.value = id; option.text = city[id]; // select4.prepend(option); // убыванию select4.append(option); // возрастанию >document.querySelector('.out-4').append(select4);а вот вывод — довольно интересный. В выпадающем списке первым отобразиться Kyiv, потом Warsaw, потом Prague. Может показаться, что алфавитный порядок, но все чуть сложнее.
Такой порядок вывода связан с тем, как JS перебирает циклом объект. И хотя однозначной определенности порядка в объекте, но если у нас ключи строковые — то порядок в большинстве браузеров определяется по порядку добавления в объект. Однако если ключи — числовые строки, то у нас идет сравнение по числам ключей. Именно данную ситуацию мы и наблюдаем тут.
Увы все подобные «соглашения и наблюдения» не позволяют задать жесткий порядок. Поэтому либо добавлять костыли (например, перед ключами дописать id_) либо менять подход.
Создание select с точным порядком option
Давайте сделаем код, который позволит обеспечить точный порядок option в выпадающем списке, который создан с помощью JavaScript. Для начала трансформируем объект из примера выше в массив вида:
const city2 = [ < "city" : "Warsaw", "id" : "756135">, < "city" : "Kyiv", "id" : "703448", "selected" : true>, < "city" : "Prague", "id" : "3067696">];Каждый из вложенных объектов имеет числовой индекс, таким образом задаем точный порядок. Также, если вы заметили, такой подход позволяет добавлять дополнительные атрибуты, типа selected.
Реализуем перебор массива:
const select6 = document.createElement('select'); for (let i = 0; i < city2.length; i++) < const option = document.createElement('option'); option.value = city2[i].id; option.text = city2[i]['city']; // if (city2[i].selected) option.selected = true; select6.append(option); >document.querySelector('.out-6').append(select6);Как видно теперь мы полностью контролируем порядок option внутри select.
Подведем небольшой итог. Мы рассмотрели все кейсы работы с select , с которыми может столкнуться фронтенд программист. Если что-то не поняли — посмотрите видео по данному уроку.