dongming8867 2017-04-20 20:31
浏览 81
已采纳

访问5个过滤器中的多个选定值 - SumoSelect - Ajax - JavaScript - JQuery

I am attempting a 3 dynamically added (Country-State-City) + 2 hardcoded (Type-Band) multi-select filters in a form. Selected values will query a MySQL db, and the record set will be sent back for visualization on an OpenStreetMap.

Example of what desired: the selection of Austria+Switzerland in "Country" fills in "State" with Tirol+Ticino; after selecting both states, "City" is filled in with Innsbruck+Lugano. Checking additional multiple options in the last 2 filters will complete the set of values to query the db and return data to be displayed on OSM.

Plenty of examples on the web when ONE Country-State-City are selected and my code works fine for this. I couldn't find anything for multi-multiple selections that's why I am asking you for help.

The question is: how to modify my code to let multiple selections work out, as expected from the example above?

I have tried several approaches, and none of them worked out.

  • I converted name = "country" in name = "country[ ]". This works for posting the values to the php file after clicking "submit" but not to access multiple values in JavaScript/jQuery.

  • Similarly, I also tried a hardcoded, multi-in-one serialization of var country-state-city (look at noted vars in the code) modifying the PHP accordingly but I cannot extract values from selected checkboxes to push them into an array and prepare the multi-in-one serialization.

Everything you need is provided below:

<!DOCTYPE html>
    <html>
    <head>
    <title><b>HTML</b></title>

    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src = "sumo/jquery.sumoselect.min.js"></script>
    <link href = "sumo/sumoselect.css" rel="stylesheet" />

    <script type = "text/javascript">
    function ajaxFunction(choice) {
    var httpxml;
    try {
      // Firefox, Opera 8.0+, Safari
      httpxml = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        httpxml = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httpxml = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
          alert("Your browser does not support Ajax! Update it or change browser");
          return false;
          }
        }
      }

    function stateChanged() {   //callback function
        if (httpxml.readyState == 4) {
            if (httpxml.status == 200) {
            var myObject = JSON.parse(httpxml.responseText);
            document.getElementById("Json").innerHTML = httpxml.responseText;

            if (choice == 's1') {
            //Discard old State/Region and City options, then populate them with new options and reload SumoSelect
            for (j = document.myForm.state.options.length-1; j >= 0; j--) {
                document.myForm.state.remove(j);
                document.myForm.city.remove(j);
            }

            for (i = 0; i < myObject.state.length; i++) {
                var newOption = $('<option>');
                newOption.attr('value', myObject.state[i]).text(myObject.state[i]);
                $('#state').append(newOption);
            }   

                $(function(){   
                    $('#state')[0].sumo.reload();
                    $('#city')[0].sumo.reload();
                });
            }


            if (choice == 's2') {
            //Discard old City options while keeping State/Region, then populate with new Cities and reload SumoSelect
            for (j = document.myForm.city.options.length-1; j >= 0; j--) {
                document.myForm.city.remove(j);
            }

            for (i = 0; i < myObject.city.length; i++) {
                var newOption = $('<option>');
                newOption.attr('value', myObject.city[i]).text(myObject.city[i]);
                $('#city').append(newOption);
            }
                $(function(){
                    $('#city')[0].sumo.reload();
                });
            }

            } else { 
          alert ("An error has occurred: " + httpxml.statusText);
          }
        }
    } //end of stateChanged() callback function

    //Ajax request
    var url = "ajax-dd3ck.php";
    var country = myForm.country.value;
    //var country = "Italy-RepubblicaSanMarino-Austria";

    if (choice != 's1'){
        //var state = "Piemonte-Tirol";
        var state = myForm.state.value;
        var city = myForm.city.value;
    } else {
        var state = '';
        var city = '';
    }

    url = url + "?country=" + country;
    url = url + "&state=" + state;
    url = url + "&city=" + city;
    url = url + "&id=" + Math.random();
    document.getElementById("url").innerHTML = url;
    httpxml.open("GET", url, true);
    httpxml.onreadystatechange = stateChanged; //callback function
    httpxml.send(null);
    }
    </script>
    </head>

    <body>
    <form name = "myForm" action = "ajax-dd3-details.php" method = "post">

                <select id = "country" name = "country[]" style = "width: 160px"  multiple = "multiple" onchange = "ajaxFunction('s1');" >
                        <?php
                            require "config.php"; 
                            $sql = " SELECT DISTINCT Nazione FROM $db.$table ";
                            foreach ($dbo->query($sql) as $row) {
                            echo "<option value = " . $row['Nazione'] . ">" . $row['Nazione'] . "</option>";
                            }
                    ?>
                </select>
                <script>
                    $('#country').SumoSelect({
                        placeholder: 'Select Country',
                        selectAll: true
                        });
                </script>

                <select id = "state" name = "state[]" style = "width: 160px" multiple = "multiple" onchange = "ajaxFunction('s2');" >
                </select>
                <script>
                    $("#state").SumoSelect({
                        placeholder: 'Select State/Region',
                        selectAll: true
                        });
                </script>

                <select id = "city" name = "city[]" style = "width: 160px" multiple = "multiple" onchange = "ajaxFunction('s3');" >
                </select>
                <script>
                    $("#city").SumoSelect({
                        placeholder: 'Select City',
                        selectAll: true
                        });
                </script>

                <select name = "type[]" class = "testselect2" style = "width: 160px" multiple = "multiple" >
                    <option value="3D">3D</option>
                    <option value="C4FM">C4FM</option>
                    <option value="ATV">ATV</option>
                    <option value="DMR">DMR</option>
                    <option value="DS">DS</option>
                    <option value="EL">EL</option>
                    <option value="FDMA">FDMA</option>
                    <option value="LN">LN</option>
                    <option value="Beacon">Beacon</option>
                    <option value="Analogic">Analogic</option>  
                </select>
                <script>
                    $('.testselect2').SumoSelect({
                        placeholder: 'Select Type',
                        selectAll: true
                        });
                </script>

                <select class = "testselect2" style = "width: 160px" name = "band[]" multiple = "multiple" >
                    <option value="29MHz">29 MHz</option>
                    <option value="50MHz">50 MHz</option>
                    <option value="VHF">VHF</option>
                    <option value="UHF">UHF</option>
                    <option value="SHF">SHF</option>
                </select>
                <script>
                    $('.testselect2').SumoSelect({
                        placeholder: 'Select Band',
                        selectAll: true
                        });
                </script>


                    <input type = "submit" value = "Submit">

        </form>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <div id = "url"></div>
    <div id = "Json"></div>

    </body>
    </html>

ajax-dd3ck.php

<?Php
require "config.php";
error_reporting(0);// With this no error reporting will be there

$country = $_GET['country']; 
$state1 = $_GET['state'];
$city1 = $_GET['city']; 
// Validate the inputs  - Checking country variable
if ((strlen($country)) > 0 and (!ctype_alpha($country))) { 
    echo "Data Error";
    exit;
}
// Checking state variable (with space)
if ((strlen($state1)) > 0 and ctype_alpha(str_replace(' ', '', $state1)) ===    false) {
    echo "Data Error";
    exit;
}// end of input validation

if (strlen($country) > 0) {
    $q_country = "SELECT DISTINCT(Regione) FROM $db.$table WHERE Nazione = '$country'";
}

$sth = $dbo->prepare($q_country);
$sth->execute();
$state = $sth->fetchAll(PDO::FETCH_COLUMN);

$q_state = "SELECT DISTINCT(Provincia) FROM $db.$table WHERE ";
if (strlen($state1) > 0) {
    $q_state = $q_state . "Regione = '$state1'";
} 

$sth = $dbo->prepare($q_state);
$sth->execute();
$city = $sth->fetchAll(PDO::FETCH_COLUMN);

$main = array('state'=>$state,'city'=>$city,'value'=>array("state1"=>"$state1","city1"=>"$city1"));
echo json_encode($main); 
?>

MySQL: Create table

    CREATE TABLE IF NOT EXISTS `markers` (
          `ID` int(4) NOT NULL AUTO_INCREMENT,
          `Ripetitore` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `Frequenza` decimal(14,6) NOT NULL,
          `Shift` decimal(14,6) NOT NULL,
          `Tono` decimal(10,1) DEFAULT NULL,
          `Banda` int(2) DEFAULT NULL,
          `ID_Nazione` int(2) NOT NULL DEFAULT '1',
          `Nazione` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL DEFAULT 'Italy',
          `ID_Regione` int(2) NOT NULL,
          `Regione` varchar(25) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `ID_Provincia` int(3) NOT NULL,
          `Provincia` varchar(22) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `Localita` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `ID_Tipologia` int(2) NOT NULL,
          `Tipologia` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci DEFAULT NULL,
          `Identificativo` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci DEFAULT NULL,
          `Rete` varchar(34) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci DEFAULT NULL,
          `Locator` varchar(6) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `Lat` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `Long` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci NOT NULL,
          `Gestore` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_mysql500_ci DEFAULT NULL,
          `Data` date NOT NULL DEFAULT '0000-00-00',
          PRIMARY KEY (`ID`)
        ) ENGINE=InnoDB AUTO_INCREMENT=1969 DEFAULT CHARSET=latin1;

MySQL: Insert data

    INSERT INTO `markers` (`ID`, `Ripetitore`, `Frequenza`, `Shift`, `Tono`, `Banda`, `ID_Nazione`, `Nazione`, `ID_Regione`, `Regione`, `ID_Provincia`, `Provincia`, `Localita`, `ID_Tipologia`, `Tipologia`, `Identificativo`, `Rete`, `Locator`, `Lat`, `Long`, `Gestore`, `Data`) VALUES
    (1, 'RV', '144.850000', '0.000000', '0.0', 15, 1, 'Italy', 0, 'ValleAosta', 102, 'Aosta', 'Aosta', 1, 'C4FM', 'IX1VKK', '', 'JN35PR', '45.73512', '7.30514', 'ix1vkk', '2016-11-29'),
    (2, 'R0', '145.600000', '-0.600000', '74.4', 15, 1, 'Italy', 0, 'ValleAosta', 102, 'Aosta', 'Courmayeur (AO)', 16, 'Analogic', '', '', 'JN35LT', '45.8125', '6.958333', 'ari aosta ix1vkk', '2016-11-29'),
    (3, 'R6', '145.750000', '-0.600000', '74.4', 15, 1, 'Switzerland', 0, 'Ticino', 102, 'Lugano', 'Lugano', 10, 'EL', '357734', '', 'JN35TS', '45.77513', '7.63412', 'ari aosta ix1vkk', '2016-11-29'),
    (4, 'R7', '145.775000', '-0.600000', '0.0', 15, 1, 'Germany', 0, 'FreistaatBayern', 102, 'Munchen', 'Munchen', 4, 'DS', 'IX1VKK', '', 'JN35TS', '45.770833', '7.625', 'ari aosta', '2016-11-29'),
    (5, 'RU12', '430.300000', '5.000000', '0.0', 20, 1, 'Slovenia', 0, 'ObalnoKraska', 102, 'Capodistria', 'Capodistria', 3, 'DMR', 'IX1VKK - 222111', 'BrandMeister', 'JN35PR', '45.72917', '7.29167', 'IX1VKK', '2017-01-21'),
    (6, 'RU14', '431.950000', '0.000000', '0.0', 20, 1, 'Italy', 0, 'ValleAosta', 102, 'Aosta', 'Aosta (AO)', 1, 'C4FM', 'IX1VKK', '', 'JN35PR', '45.72917', '7.29167', 'IX1VKK - ARI Aosta', '2017-02-24'),
    (7, 'RU15', '431.975000', '-1.600000', '74.4', 20, 1, 'Austria', 0, 'Tirol', 102, 'Innsbruck', 'Innsbruck', 16, 'Analogic', '', '', 'JN35PQ', '45.68280', '7.30574', 'IX1VKK - ARI Aosta', '2017-02-24'),
    (8, '50 MHz', '50.480000', '0.500000', '123.0', 10, 1, 'RepubblicaSanMarino', 1, 'SanMarino', 60, 'CittaDiSanMarino', 'CittaDiSanMarino', 16, 'Analogic', '', 'Val Dora', 'JN35XM', '45.520833', '7.958333', 'iw1fwu', '2016-11-29'),
    (9, 'E', '144.600000', '0.000000', '127.3', 15, 1, 'Italy', 1, 'Piemonte', 63, 'Torino', 'Torino', 10, 'EL', '983646', '', 'JN35TB', '45.0625', '7.625', 'ik1weg', '2016-11-29'),
    (10, 'T', '144.625000', '0.000000', '82.5', 15, 1, 'Italy', 1, 'Piemonte', 63, 'Torino', 'Castagneto Po (TO)', 16, 'Analogic', '', 'Chivasso', 'JN35WD', '45.145833', '7.875', 'ari chivasso', '2016-11-29'),
    (11, 'E', '144.700000', '0.000000', '114.8', 15, 1, 'Italy', 1, 'Piemonte', 63, 'Torino', 'Sestriere (TO)', 10, 'EL', '229829', 'Val Susa', 'JN34KW', '44.9375', '6.875', 'ik1ybm', '2016-11-29'),
    (12, 'RV', '144.987500', '1.000000', '0.0', 15, 1, 'Italy', 1, 'Piemonte', 63, 'Torino', 'Torino (TO)', 4, 'DS', 'IR1CJ', ' ', 'JN35UB', '45.0625', '7.708333', 'IW1GAP', '2017-03-23'),
    (13, 'E', '145.225000', '0.000000', '94.8', 15, 1, 'Italy', 1, 'Piemonte', 57, 'Verbania', 'Verbania', 10, 'EL', '573542', '', 'JN45GW', '45.9375', '8.541667', 'iz1uqg iz1ujj iz1xjr', '2016-11-29'),
    (14, 'RV', '145.287500', '-0.600000', '82.5', 15, 1, 'Italy', 1, 'Piemonte', 62, 'Asti', 'Montaldo Scarampi (AT) ', 16, 'Analogic', '', '', 'JN44DT', '44.8125', '8.291667', 'iz1jvh', '2016-11-29'),
    (15, 'E', '145.325000', '0.000000', '0.0', 15, 1, 'Italy', 1, 'Piemonte', 64, 'Cuneo', 'Cuneo', 10, 'EL', '391101', '', 'JN34SJ', '44.395833', '7.541667', 'sconosciuto', '2016-11-29');

Documentation about SumoSelect can be found HERE with a demo HERE

I have been struggling for days and I cannot see the issue because too much focused on it! Any help/answer/suggestion would be greatly appreciated !

  • 写回答

2条回答 默认 最新

  • dongmimeng5500 2017-04-25 02:54
    关注

    According to my best understanding by your question, You want to send multi-selected data to server via ajax calls.

    For that first you need to serialize your data. eg. for sending multiple states to server you can do something like

    state = $('#state').val()
    state = JSON.stringify(state)
    .....
    // send state to server
    url = url + "&state=" + state;
    ...
    

    Then in php you can receive these values like

    $state =  $_GET['state'];
    $states_array =  json_decode($state);
    var_dump($states_array);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求
  • ¥15 SpringSecurityOauth2登陆前后request不一致