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

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@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