Как получить значение с querySelector?
<select class="form-control form-control-lg" id="processor"required=""> <option value="6398">6398р. — Процессор Intel Core i3-10100F Box Comet Lake-S 3.6(4.3) ГГц / 4core / без видеоядра / 6Мб / 65 Вт s.1200 BX8070110100F</option> <option value="11898">11898р. — Процессор Intel Core i3-12100 Box Alder Lake 3.3(4.3) ГГц /4core/ UHD Graphics 730/ 12Мб /89Вт s.1700 BX8071512100</option> <option value="37498">37498р. — Процессор Intel Core i9-12900KF Box без кулера Alder Lake 3,2(5.2) ГГц /16core/ без видеоядра/ 30Мб /241Вт s.1700 BX8071512900KF</option> </select> |
<select class="form-control form-control-lg" id="processor"required=""> <option value="6398">6398р. — Процессор Intel Core i3-10100F Box Comet Lake-S 3.6(4.3) ГГц / 4core / без видеоядра / 6Мб / 65 Вт s.1200 BX8070110100F</option> <option value="11898">11898р. — Процессор Intel Core i3-12100 Box Alder Lake 3.3(4.3) ГГц /4core/ UHD Graphics 730/ 12Мб /89Вт s.1700 BX8071512100</option> <option value="37498">37498р. — Процессор Intel Core i9-12900KF Box без кулера Alder Lake 3,2(5.2) ГГц /16core/ без видеоядра/ 30Мб /241Вт s.1700 BX8071512900KF</option> </select>
и
processor = document.querySelector('#processor'),
Как получить значение(value="6398" стоимость) выбранного пункта из select с id "processor"?
Дополнительно:
document.getElementById("processor").value document.querySelector("#processor").value |
document.getElementById("processor").value document.querySelector("#processor").value
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <select class="form-control form-control-lg" id="processor" required=""> <option value="6398"> 6398р. — Процессор Intel Core i3-10100F Box Comet Lake-S 3.6(4.3) ГГц / 4core / без видеоядра / 6Мб / 65 Вт s.1200 BX8070110100F </option> <option value="11898"> 11898р. — Процессор Intel Core i3-12100 Box Alder Lake 3.3(4.3) ГГц /4core/ UHD Graphics 730/ 12Мб /89Вт s.1700 BX8071512100 </option> <option value="37498"> 37498р. — Процессор Intel Core i9-12900KF Box без кулера Alder Lake 3,2(5.2) ГГц /16core/ без видеоядра/ 30Мб /241Вт s.1700 BX8071512900KF </option> </select> <button onclick="test()">click</button> <script> async function test() { let s = document.querySelector("#processor").value; console.log(s); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <select class="form-control form-control-lg" id="processor" required=""> <option value="6398"> 6398р. — Процессор Intel Core i3-10100F Box Comet Lake-S 3.6(4.3) ГГц / 4core / без видеоядра / 6Мб / 65 Вт s.1200 BX8070110100F </option> <option value="11898"> 11898р. — Процессор Intel Core i3-12100 Box Alder Lake 3.3(4.3) ГГц /4core/ UHD Graphics 730/ 12Мб /89Вт s.1700 BX8071512100 </option> <option value="37498"> 37498р. — Процессор Intel Core i9-12900KF Box без кулера Alder Lake 3,2(5.2) ГГц /16core/ без видеоядра/ 30Мб /241Вт s.1700 BX8071512900KF </option> </select> <button onclick="test()">click</button> <script> async function test() { let s = document.querySelector("#processor").value; console.log(s); } </script> </body> </html>
- Evgenii, а реально как получить только одно value?
- Evgenii, а сколько их получается по вашему? одно и есть
- php_xak, value это значение , значение селекта ) откуда там несколько.
Либо вы имели ввиду список оптионс
Ответы:
тебе так сложно нажать правую кнопку в инспекторе на нужной ветке и выбрать copy as css selector?
не всегда оно красивое но браузер старается
#processor > option:nth-child(1)
по теме, воспользуйся css selector по значению атрибута
#processor > option[value="6398"]
p.s. тебе точно нужно выбирать по значению цены? может правильнее использовать querySelectorAll и перебирать каждое значение, проверять по условию и действовать?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для получения значения с помощью querySelector вам необходимо использовать метод .textContent или .value, в зависимости от того, что именно вы хотите получить.
Например, если вы хотите получить текстовое содержимое элемента, то используйте .textContent. Если же вам нужно получить значение из input элемента, то используйте .value.
Пример использования querySelector для получения значения:
// Получаем текстовое содержимое элемента с id="example" let textContent = document.querySelector('#example').textContent; // Получаем значение из input элемента с id="inputExample" let value = document.querySelector('#inputExample').value;
Также обратите внимание, что querySelector возвращает только первый элемент, который соответствует заданному селектору. Если вам нужно получить все элементы, которые соответствуют селектору, используйте метод querySelectorAll.
Надеюсь, это поможет вам получить значение с помощью querySelector! Если у вас остались вопросы, не стесняйтесь задавать.