Как взять значение из select js

Как получить значение value из select option

Для того чтобы получить значение value из select option, можно воспользоваться двумя способами если это нужно сделать динамично, не перезагружая страницу то тут поможет jquery:

$('#sel').change(function()< var text = $("#sel option:selected").text(); $("input.sel_h").val(text); >);

а вид HTML такой:

А с помощью PHP получим уже значение из инпут

Здесь мы забираем текст и выделенного селекта и передаем его в input, скрытый инпут нужен для передачи методом POST в php

Второй способ без js скрипта на PHP, просто не писать value в option и тогда при пополнении POST передачи данных они сразу будут брать значения из текста вписанного в option

Поделись с друзьями:

Похожие статьи

1 комментарий для записи Как получить значение value из select option

Как получить value из option на чистом JS?

Делаю блок калькулятора на чистом JS. Столкнулась с проблемой, что не могу получить значение value в option. Как вариант, получилось только через onchange в html, но знаю, что это костыль, поэтому интересует правильное решение.

var select = document.getElementById('agriculture'); selectFunction = function()

 Пшеница ≈ 3100 грн / т" Овес ≈ 2500 грн / т" Рожь ≈ 3100 грн / т" Кукуруза ≈ 2400 грн / т" Просо ≈ 1850 грн / т" 

Потом эти значения буду использовать в формуле.

Отслеживать

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 ); >);

 Пшеница ≈ 3100 грн / т" Овес ≈ 2500 грн / т" Рожь ≈ 3100 грн / т" Кукуруза ≈ 2400 грн / т" Просо ≈ 1850 грн / т" 

Тотальное руководство по элементу Select в JavaScript

Сегодня я расскажу все про элемент select. Вы научитесь:

• получать value выбранного значения
• получать текст выбранного значения
• получать все option select
• изменять выбранное значение через JS
• задавать выбранное значение по умолчанию
• создавать select через JavaScript на основе объекта
• разберемся в порядке отображения option
• научимся управлять порядком отображения option через JS
• научимся создавать select с заданным порядком option c помощью массива
• добавлять дополнительные атрибуты к option

Немало. Все это позволит закрыть любые кейсы по применению select во фронтенде. Потратим 15 минут на обучение? Риторический вопрос, поехали.

Получаем значение value из select

Самый простой пример, получить значение value выбранного элемента select . Здесь все достаточно просто, допустим в HTML такой код:

Two Three Four Five 

Для получения значения можно сделать так:

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 в верстку и проверим.

Two Three Four Five 

теперь Four будет выбран при загрузке страницы. Отлично, но можно ли задать выбранное значение с помощью JavaScript? Да, просто присвоим нужный value :

const select = document.querySelector('.select-1'); select.value = 555;

и select автоматически сделает активным option с этим value .

Задать пустое значение при загрузке

Допустим вы не хотите задавать какой-то option , возможно, что данные значения пользователь может пропустить — не выбирать. Как быть тогда? Применим атрибут disable:

Choose symbol B C D E 

Теперь выводится пустой option с предложением выбрать что-либо из выпадающего списка. Далее возможно реализовать два варианта:

1. Заставить выбрать обязательно что-либо из списка.
2. Разрешить пользователю ничего не выбирать.

Второй вариант мы уже сделали с помощью 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 , с которыми может столкнуться фронтенд программист. Если что-то не поняли — посмотрите видео по данному уроку.

Как получить значение выбранного параметра в поле с помощью jQuery

Вы можете использовать jQuery-селектор :selected в сочетании с методом val() , чтобы найти значение выбранного параметра в поле или раскрывающемся списке.

Давайте посмотрим следующий пример, чтобы понять, как это работает:

         
Выберите страну: Соединенные Штаты Индия Великобритания  
  

Если значение для параметра не определено специально, вместо этого в качестве значения будет использоваться текстовое содержимое элемента , как показано в следующем примере:

         
Выберите страну: Соединенные Штаты Индия Великобритания  
  

В качестве альтернативы вы можете использовать jQuery-метод text() для получения текстового содержимого элемента.

Получить выбранные параметры из окна множественного выбора

Точно так же вы можете получить выбранные значения из поля множественного выбора (multiple select).

Поле множественного выбора позволяет пользователю выбрать несколько вариантов. Удерживайте нажатой клавишу Control в Windows или командную клавишу на Mac, чтобы выбрать несколько параметров. Вы можете включить выбор нескольких разделов в поле выбора, добавив атрибут multiple к тегу . Вот пример:

         
Выберите страны: Соединенные Штаты Индия Великобритания Бразилия Германия  Получить значения 
  

Читайте также

Похожие примеры:

• Как получить значение выбранной радиокнопки в группе с помощью jQuery
• Как получить значения выбранных чекбоксов в группе с помощью jQuery
• Как получить текст внутри элемента с помощью jQuery