Как обработать несколько select одним запросом ajax?

@Serega91 · Регистрация: 18.11.2013

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

Всем привет, имеется задача, нужно вывести предварительную сумму на основании 2х параметров.
Параметры задаются в 2х или более Select-ах... Вот пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<select name="color1" method="post" id="color" class="select1">
<option value="">Выберите цвет</option>
<option value="1">Синий</option>
<option value="2">Красный</option>
<option value="3">Зеленый</option>
</select>
<select name="size1" method="post" id="sizenew" class="select1">
<option value="">Выберите размер</option>
<option value="S">S</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>

Вот например у нас имеется 2 селекта, каждый имеет ID и свои значения... Нужно теперь сделать запрос такой, чтобы при выборе Синего цвета выводилось на странице 200 рублей, если красный то например 100 рублей, если зеленый то например 500 рублей, а так же учитывался размер, если размер L то в зависимости от цвета +100 рублей, если S то 50 рублей и т.д. в итоге на странице нужно чтобы отображался результат, получилось сделать ajax для одного селекта, а как сделать так, чтобы обрабатывал сразу 2 и суммировал переменные а после выводил?

Вот пример моего ajax

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
                              $(function(){
        $('#color').change(function(){
            var val = $(this).val(); //значение option
            $.ajax({
                type:'post',
                url:'selectphp.php',//обработчик php
                data:'value='+val,//передаем значение option. на сервере будет доступно $_POST['value'}
                success:function(result){// получаем ответ с сервера
                    $('#res').html(result);//выводим на странице
                }
                
            })
            console.log($(this).val());
        })
    })
                              </script>

И собственно вот обработчик файл php

PHP
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
<?php
$a=$_POST['value'];
if ($a=='1')
{
    $a=100;
}
Else
{
    if ($a=='2')
{
    $a=200;
}
Else
{
    if ($a=='3')
{
    $a=300;
}
 
}
}
 
echo "<h3>Стоимость составляет:</h3>".$a." рублей.";
 
?>
 
Как мне обработать сразу 2 селекта в одном php...

@Mr_Sergo · 02.09.2018, 19:46

Serega91,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="color1" id="color" class="select1">
    <option value="">Выберите цвет</option>
    <option value="1">Синий</option>
    <option value="2">Красный</option>
    <option value="3">Зеленый</option>
</select>
<select name="size1" id="sizenew" class="select1">
    <option value="">Выберите размер</option>
    <option value="S">S</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
</select>
<input type="button" id="some-id" value="Отправить">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#some-id').click(function(){
    $.ajax({
        type: 'POST',
        url: 'selectphp.php',
        data: {
            color : $("#color option:selected").text(),
            sizenew : $("#sizenew option:selected").text()
        },
        success: function(data){
            alert(data);
        }
    });
});

@Serega91 · 02.09.2018, 21:22 **[ТС]**

Я так понял тут по нажатию кнопки работает? Мне нужно чтобы при выборе в диве менялись цифры в зависимости от выбора.

@Mr_Sergo · 02.09.2018, 21:32

Сообщение от Serega91

в диве менялись цифры

В вашем html никакого дива не вижу. Куда вы хотите выводить-то?

@Serega91 · 02.09.2018, 21:40 **[ТС]**

Пардон, это просто селект из формы выдернут, там выше есть просто пустой див в контейнере боди.

HTML5
1
2
3
4
5
6
7
8
9
10
11
.....
<div id="res"></div>
.....
<form method="post">
.....
<select1>
</select1>
<select2>
</select2>
....
</form>

Вот в див с ID = res выводится переменная после обработки php.

@Mr_Sergo · 02.09.2018, 22:22

Serega91,

Дак и что тут сложного?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="res"></div>
 
<select name="color1" id="color" class="select1">
    <option value="">Выберите цвет</option>
    <option value="1">Синий</option>
    <option value="2">Красный</option>
    <option value="3">Зеленый</option>
</select>
<select name="size1" id="sizenew" class="select1">
    <option value="">Выберите размер</option>
    <option value="S">S</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
</select>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#color, #sizenew').change(function(){
    if($("#color").val() !== '' && $("#sizenew").val() !== ''){
        $.ajax({
            type: 'POST',
            url: 'selectphp.php',
            data: {
                color : $("#color").val(),
                sizenew : $("#sizenew").val()
            },
            success: function(data){
                $('#res').html(data);
            }
        });
    }
});

PHP
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
$color = $_POST['color'];
$sizenew = $_POST['sizenew'];
 
if($color == '1'){
    $color = 100;
}
if($color == '2'){
    $color = 200;
}
if($color == '3'){
    $color = 300;
}
 
 
if($sizenew == 'S'){
    $color += 500;
}
if($sizenew == 'L'){
    $color += 1000;
}
if($sizenew == 'XL'){
    $color += 1500;
}
if($sizenew == 'XXL'){
    $color += 2000;
}
 
echo "<h3>Стоимость составляет:</h3>".$color." рублей";

@Serega91 · 03.09.2018, 16:35 **[ТС]**

Сложность в том, что почему то у меня не работает, даже Ваш пример( никуда ничего не выводится

@Mr_Sergo · 03.09.2018, 16:59

Serega91,

В консоли есть какие-нибудь ошибки?

Добавлено через 5 минут
Serega91,

Проверьте подключение Jquery
Проверьте путь до обработчика selectphp.php
Проверьте путь до файла с аджакс-запросом

Добавлено через 2 минуты
Serega91,
Потому что только что проверил этот код и у меня все работает четко.

Добавлено через 12 минут
Смотрим тут
Работает?

@Serega91 · 03.09.2018, 18:38 **[ТС]**

Я конечно проверю, но точно проверял... jquery подключен т.к. предыдущий мой скрипт выводит всё. Перепроверю.

@Mr_Sergo · 03.09.2018, 20:00

Serega91, Вы случайно не Оперой пользуетесь? В ней почему-то не работает вообще.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@Serega91 0 / 0 / 0 Регистрация: 18.11.2013 Сообщений: 73
	02.09.2018, 21:22 [ТС]
	Я так понял тут по нажатию кнопки работает? Мне нужно чтобы при выборе в диве менялись цифры в зависимости от выбора. 0

@Serega91 0 / 0 / 0 Регистрация: 18.11.2013 Сообщений: 73
	03.09.2018, 16:35 [ТС]
	Сложность в том, что почему то у меня не работает, даже Ваш пример( никуда ничего не выводится 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	03.09.2018, 16:59
	Serega91, В консоли есть какие-нибудь ошибки? Добавлено через 5 минут Serega91, Проверьте подключение Jquery Проверьте путь до обработчика selectphp.php Проверьте путь до файла с аджакс-запросом Добавлено через 2 минуты Serega91, Потому что только что проверил этот код и у меня все работает четко. Добавлено через 12 минут Смотрим тут Работает? 1

@Serega91 0 / 0 / 0 Регистрация: 18.11.2013 Сообщений: 73
	03.09.2018, 18:38 [ТС]
	Я конечно проверю, но точно проверял... jquery подключен т.к. предыдущий мой скрипт выводит всё. Перепроверю. 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	03.09.2018, 20:00
	Serega91, Вы случайно не Оперой пользуетесь? В ней почему-то не работает вообще. 0