Выбор нескольких позиций из второго 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)
?>

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .