Как прочитать-получить следующий элемент-значение

@qroner · Регистрация: 03.10.2021

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Подскажите плз.
Есть такой HTML-код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="delivery-block">
    <div class="">
        <p class="plase-p">Выберите местоположение:</p>
        <select name="" id="select_" size="1">
            <option disabled selected="selected">Город...</option>         
            <option value="Москва">Москва</option>
            0           
            <option value="Питербург">Питербург</option>
            500         
            <option value="Екатеринбург">Екатеринбург</option>
            700         
            <option value="Сочи">Сочи</option>
            800         
            <option value="Омск">Омск</option>
            1000            
            <option value="Томск">Томск</option>
            1200            
        </select>
    </div>
    <div class="delivery-summ"><p>Сумма доставки составит: <span slass="delivery-price-summ">0</span> Руб.</p></div>
</div>

Получаю в js выбранное значение value, а вот как дальше прочитать цифры типа сколько км удаленность что бы проделать расчет не могу. JS только осваиваю. Подскажите кто знает. Спасибо

@DrType · 03.10.2021, 20:10

У вас какой-то невалидный код. В элемент select можно вкладывать только option.

@Balanaar · 04.10.2021, 09:45

qroner, перенесите ваши числа в value. Названия городов получайте с помощью innerHTML, ну а расстояние через свойство value.

@amr-now · 05.10.2021, 07:44

Здравствуйте.
Два варианта работы с данными:
1) Или все данные зашивать в HTML-тэги.
2) Или данные держать отдельно в списках.

Зашивать в HTML-теги нужно как можно меньше. Им лучше оставить только интерфейс.

Второй способ. Допустим, ключ - город. По городу мы можем получить несколько свойств, а не только одну сумму.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div class="delivery-block">
        <div class="">
            <p class="plase-p">Выберите местоположение:</p>
            <select name="" id="select_" size="1">
                <option selected disabled>Город...</option>
                <option value="Москва">Москва</option>
                <option value="Петербург">Петербург</option>
                <option value="Екатеринбург">Екатеринбург</option>
                <option value="Сочи">Сочи</option>
                <option value="Омск">Омск</option>
                <option value="Томск">Томск</option>
            </select>
        </div>
        <div class="delivery-summ">
            <p>Сумма доставки составит: <span class="delivery-price-summ">0</span> Руб.</p><!-- Была ошибка slass -->
        </div>
    </div>
    <script>
        // Хранилище - прайс-лист
        const prices = {
            "Москва": 0,
            "Петербург": 500,
            "Екатеринбург": 700,
            "Сочи": 800,
            "Омск": 1000,
            "Томск": 1200
        };
 
        let select_ = document.getElementById("select_"),
            priceEl = document.querySelector(".delivery-price-summ");
        select_.onchange = select_change;
 
        function select_change() {
            // По выбранному городу можно получить не только одно число, 
            // но и несколько свойств в виде объекта
            let city = prices[this.value];
 
            priceEl.textContent = city;
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	03.10.2021, 20:10
	У вас какой-то невалидный код. В элемент `select` можно вкладывать только `option`. 1

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	04.10.2021, 09:45
	qroner, перенесите ваши числа в `value`. Названия городов получайте с помощью `innerHTML`, ну а расстояние через свойство `value`. 1