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

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

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

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

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

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

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

PHP/HTML

                         <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

/* 
 * При полной загрузке документа 
 * мы начинаем определять события 
 */
$(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

<?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)
?>

Вернуться к обсуждению:
Выбор нескольких позиций из второго select jQuery