Как обработать несколько 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, Вы случайно не Оперой пользуетесь? В ней почему-то не работает вообще.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@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