访问 5 个过滤器中的多个选定值 - SumoSelect - Ajax - JavaScript - JQuery
Accessing to multi selected values in 5 filters - SumoSelect - Ajax - JavaScript - JQuery
我正在尝试在一个表单中添加 3 个动态添加的 (Country-State-City) + 2 个硬编码的 (Type-Band) multi-select 过滤器。选定的值将查询 MySQL 数据库，记录集将被发回以在 OpenStreetMap 上进行可视化。
想要的例子：select奥地利+瑞士在"Country"的离子用蒂罗尔+提契诺填充"State"；在 select 两个州之后， "City" 填充了 Innsbruck+Lugano。检查最后 2 个过滤器中的其他多个选项将完成查询数据库的值集和要在 OSM 上显示的 return 数据。
当 select 编辑一个国家-州-城市时，网络上有大量示例，我的代码对此工作正常。我找不到关于多重 select 离子的任何信息，这就是我向您寻求帮助的原因。
问题是：如何修改我的代码，让多个 select 离子按照上面的示例计算出来？
我尝试了几种方法，none 成功了。
我把name="country"转换成name="country[ ]"。这适用于在单击 "submit" 后将值发布到 php 文件，但不能访问 JavaScript/jQuery.
同样，我还尝试了 var country-state-city 的硬编码多合一序列化（查看代码中提到的 vars）相应地修改了 PHP 但我无法从 selected 复选框中提取值以将它们推入数组并准备多合一序列化。
下面提供了您需要的一切：
<!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: 创建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 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 with a demo HERE
我已经苦苦挣扎了好几天，我看不到问题，因为太专注了！任何 help/answer/suggestion 将不胜感激！
根据我对你的问题的最佳理解，你想通过 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);
根据 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?country=["Italy","RepubblicaSanMarino"]&state=&city 的形式发送 Ajax 请求=&id=0.24461933500488242 由 php 页面消化。
再次感谢 ！希望这段代码可以帮助其他人。
我正在尝试在一个表单中添加 3 个动态添加的 (Country-State-City) + 2 个硬编码的 (Type-Band) multi-select 过滤器。选定的值将查询 MySQL 数据库，记录集将被发回以在 OpenStreetMap 上进行可视化。
想要的例子：select奥地利+瑞士在"Country"的离子用蒂罗尔+提契诺填充"State"；在 select 两个州之后， "City" 填充了 Innsbruck+Lugano。检查最后 2 个过滤器中的其他多个选项将完成查询数据库的值集和要在 OSM 上显示的 return 数据。
当 select 编辑一个国家-州-城市时，网络上有大量示例，我的代码对此工作正常。我找不到关于多重 select 离子的任何信息，这就是我向您寻求帮助的原因。
问题是：如何修改我的代码，让多个 select 离子按照上面的示例计算出来？
我尝试了几种方法，none 成功了。
我把name="country"转换成name="country[ ]"。这适用于在单击 "submit" 后将值发布到 php 文件，但不能访问 JavaScript/jQuery.
中的多个值
同样，我还尝试了 var country-state-city 的硬编码多合一序列化（查看代码中提到的 vars）相应地修改了 PHP 但我无法从 selected 复选框中提取值以将它们推入数组并准备多合一序列化。
下面提供了您需要的一切：
<!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: 创建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 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 with a demo HERE
我已经苦苦挣扎了好几天，我看不到问题，因为太专注了！任何 help/answer/suggestion 将不胜感激！
根据我对你的问题的最佳理解，你想通过 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);
根据 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?country=["Italy","RepubblicaSanMarino"]&state=&city 的形式发送 Ajax 请求=&id=0.24461933500488242 由 php 页面消化。 再次感谢 ！希望这段代码可以帮助其他人。