Выбор нескольких позиций из второго select

@Reexel · Регистрация: 02.05.2015

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

Здравствуйте, господа!
Судьба поставила перед телом задачу:
Есть два select. В первом области, во втором - города этих областей. Сделал подтяжку во второй select соответствующих областей, но есть проблема: городов необходимо выбрать несколько. Сделать множественный выбор - не вариант, пользователи вряд догадаются жать Cntrl. Поэтому было преположено, что будет удобнее проставить в списке селекта чекбоксы. Но возникла проблема: не могу передать выбранные значения в виде массива в обрабатываемый файл. Куда копать?

Попробовал сделать через <li>город</li> - не врубается. Теперь идея такая: после подтяжки городов через клик по элементу во втором селекте (города) менять background на картинку с нарисованным чекбоксом, а value отправлять массив, который уже обработается в php-файле после посыла формы. В верхней части планиру сделать место, куда будут выводиться города через append, а по клику на них - шла бы очистка из массива. Но как сделать так, чтобы в массив падало именно нужные id городов? (в базе каждый город со своим id, внезависимости от id региона).

Код, для тех кому интересно:

Файл, где создается первый список.

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
                         <label2>    
                                <span>Регион:</span>
                                <div class="new-select-style-wpandyou">
                                   <select name="area_id" id="area_id" class="StyleSelectBox">
                                        <option>(all)</option>
                                        echo '<option value="0">Выберите регион</option>';
                                        <?php
                                        //include_once 'connect.php';
                                        $qqq = mysql_query("SELECT titleArea, idArea  FROM areasExch");
                                        while ($arr = mysql_fetch_array($qqq)) {
                                            echo '<option value=';
                                            echo $arr[1];
                                            echo '>';
                                            echo $arr[0];
                                            echo '</option>';
                                        } ?>
                                    </select>
                                </div>   
                                <span>Населенный пункт:</span>
                                <div class="new-select-style-wpandyou">
                                    <select name="city_id" id="city_id" disabled="disabled" class="StyleSelectBox1">
                                        <option value="0">- выберите город -</option>
                                    </select>
                                </div>
                            </label2>

Файл внешний для обработки javascripta

JavaScript
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* 
 * При полной загрузке документа 
 * мы начинаем определять события 
 */
$(document).ready(function () {
    /* 
     * На выборе селекта страны — вешаем событие, 
     * функция будет брать значение этого селекта 
     * и с помощью ajax запроса получать список 
     * регионов для вставки в следующий селект 
     */
    //alert('111');
    $('#area_id').change(function () {
        /*
         * В переменную country_id положим значение селекта
         * (выбранная страна)
         */
        var area_id = $(this).val();
        //alert('222');
        /*
         * Если значение селекта равно 0,
         * т.е. не выбрана страна, то мы
         * не будем ничего делать
         */
        if (area_id == '0') {
            $('#city_id').html('<option>- выберите город -</option>');
            $('#city_id').attr('disabled', true);
            /*$('#city_id').html('<option>- выберите город -</option>');
             $('#city_id').attr('disabled', true);*/
            return(false);
            /*
             * Очищаем второй селект с регионами
             * и блокируем его через атрибут disabled
             * туда мы будем класть результат запроса
             */
        }
        $('#city_id').attr('disabled', true);
        $('#city_id').html('<option>загрузка...</option>');
        //alert('333');
        /*
         * url запроса регионов
         */
        var url = '/get_regions.php';
        //alert('link');
        /*
         * GET'овый AJAX запрос
         * подробнее о синтаксисе читайте
         * на сайте http://docs.jquery.com/Ajax/jQuery.get
         * Данные будем кодировать с помощью JSON
         */
        $.get(
                'get_regions.php',
                'area_id=' + area_id,
                function (result) { 
                    /*
                    if (result.type == 'error') {
                        alert('error');
                        return(false);
                    }
                    else {*/
                        /*
                         * проходимся по пришедшему от бэк-энда массиву циклом
                         */
                        var options = '';
                        //$('#city_id').attr('disabled', false);
                    //alert('in query ajax' + options);
                        
                        $(result.regions).each(function () {
                            /*
                             * и добавляем в селект по региону
                             */
                            //options += '<option value="' + $(this).attr('idCity') + '">' + $(this).attr('titleCity') + '</option>';
                            options += '<option value="' + $(this).attr('idCity') + '">' + $(this).attr('titleCity') + '</option>';
                            //alert('add cities');
                        });
                        
 
                        $('#city_id').html('<option value="0">- выберите город -</option>' + options);
                        //alert('show');
                        $('#city_id').attr('disabled', false);
                        /*$('#city_id').html('<option>- выберите город -</option>');*/
                        /*$('#city_id').attr('disabled', true); */
                        
                        $('#city_id').change(function(){
                            var value = $('#city_id :selected').text();
                            var city_id = $('#city_id :selected').val(); 
                            if (city_id !== '0') {
                            $('#selectBoxInfo').html('Выбран '+ value).
                            fadeIn(1000,function(){
                            $(this).fadeOut(2000);
                            }); 
                        } 
                        }); 
                    //}
                },
                "json"
        );
    });
    //alert('444'); 
});

Ну и файл обработки запроса:

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
<?php 
require_once 'exch_fns.php';
include_once 'db_fns.php';
 
$area_id = @intval($_GET['area_id']);
$regs=mysql_query("SELECT titleCity, idCity FROM citiesExch WHERE parentArea=$area_id");
 
if ($regs) {
    $num = mysql_num_rows($regs);     
    $i = 0;
    while ($i < $num) {
       $regions[$i] = mysql_fetch_assoc($regs);  
       $i++;
    }    
    $result = array('regions'=>$regions); 
}
else {
    $result = array('type'=>'error');
}
//echo "<pre>";
//print_r ($result);
//echo "</pre>";
print json_encode($result); 
//print var_dump($result)
?>

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом