在5個過濾器中訪問多個選定的值 - SumoSelect - Ajax - JavaScript - JQuery

我正在嘗試在表單中添加3個dinamically添加的（Country-State-City）+ 2硬編碼（Type-Band）多選過濾器。選定的值將查詢MySQL數據庫，並將記錄集發送回OpenStreetMap進行可視化。在5個過濾器中訪問多個選定的值 - SumoSelect - Ajax - JavaScript - JQuery

例子：奧地利+瑞士在「國家」中的選擇用蒂羅爾+提契諾填充「國家」;在選擇兩個州之後，「城市」由因斯布魯克+盧加諾填補。在最後2個過濾器中檢查其他多個選項將完成一組值以查詢數據庫並返回要在OSM上顯示的數據。

當選擇ONE Country-State-City並且我的代碼對此很好地工作時，網上有很多例子。我無法找到多重選擇的任何內容，這就是爲什麼我要求您尋求幫助。

問題是：如何修改我的代碼以讓多個選項能夠正常工作，正如上面的示例所預期的那樣？

我嘗試了幾種方法，沒有一個能解決問題。

我在name =「country []」中轉換了name =「country」。這適用於在單擊「提交」後將值發佈到php文件，但不能訪問javascript/jQuery中的多個值。
同樣，我也嘗試了一個硬編碼的var-country-state-city的多合一序列化（查看代碼中注意到的變量），相應地修改了PHP，但我無法從選定的複選框中提取值來推送它們轉換爲數組並準備多合一序列化。你需要

一切都在下面提供：

<!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 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 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');

約SumoSelect文檔可以發現HERE與演示HERE

我一直在掙扎了幾天，我看不到的問題，因爲太專注於它！任何幫助/答案/建議將不勝感激！

來源

2017-04-20 ChemicalWeb

根據我最好的理解你的問題，你想發送多選數據通過ajax調用服務器。

首先你需要序列化你的數據。例如。用於發送多個國家的服務器，你可以這樣做

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

然後在PHP中，你可以得到這樣的值

$state = $_GET['state']; 
$states_array = json_decode($state); 
var_dump($states_array);

來源

2017-04-25 02:54:47

太棒了！這實際上是最好的解決方案！非常感謝Hemant！ – ChemicalWeb

基於與Hemant的回答

修訂後的腳本可以算出（只是第一濾波器書面，即國家，然後再修改相應的州和城市）：

<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 = $('#country').val(); 
    country = JSON.stringify(country); 

    //document.getElementById('textCountry').innerHTML = country; 

    if (choice != 's1'){ 
     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>

這讓我送的形式Ajax的dd3ck.php一個Ajax請求國家=「意大利」，「衆議員ubblicaSanMarino「] & state = & city = & id = 0.24461933500488242要被php頁面消化。再次感謝！希望這個代碼可以幫助其他人。

來源

2017-04-25 06:05:58 ChemicalWeb

在5個過濾器中訪問多個選定的值 - SumoSelect - Ajax - JavaScript - JQuery

回答

相關問題