我有两个独立的下拉菜单,它们运作良好。我想允许用户一次从两个菜单中选择值并开始处理结果。例如用户将不得不从一个菜单中选择国家/地区名称,并从另一菜单中选择准确性级别。然后系统应在地图上显示一些图像。 目前我有这样的东西。
js文件
$(function (e){
$.ajax({
type: "POST",
dataType: "json",
url: 'server.php',
data: {request_type: "get2",},
success: function(data)
{
console.log(data);
var myDiv = document.getElementById("myDiv");
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
for (var i = 0; i <(data.coordinates).length; i++) {
var option = document.createElement("option");
option.setAttribute("value", data.coordinates[i].Place);
option.text = data.coordinates[i].Place;
selectList.appendChild(option);
}
}
});
$.ajax({
type: "POST",
dataType: "json",
url: 'server.php',
data: {request_type: "get3",},
success: function(data)
{
console.log(data);
var myDiv = document.getElementById("myDiv1");
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
for (var i = 0; i <(data.coordinates).length; i++) {
var option = document.createElement("option");
option.setAttribute("value", data.coordinates[i].level);
option.text = data.coordinates[i].level;
selectList.appendChild(option);
}
}
});
$('body').on('click', 'option', 'option', function markers(){
move();
initMap();
var selectedAccuracy = $(this).val();
var selectedCountry = $(this).val();
$.ajax({
type: "POST",
dataType: "json",
url: 'server.php',
data: {request_type: "get5", accuracy: selectedAccuracy, country: selectedCountry },
success: function(data)
{
console.log(data);
var locations = parseLocation(data);
var icons = parseIcons(data);
addMarkers(icons,data,map);
}
});
});
});
Php代码:
function Photos(){
global $conn;
$AccuracyLevel = $_POST['accuracy'];
$CountryName = $_POST['country'];
$data = array();
$sql = "SELECT id, Lat,Lng,URL as 'src',Place,Country,Autotags,Accuracy FROM G_tgd_Img WHERE Accuracy ='$AccuracyLevel' AND Country = '$CountryName' LIMIT 10000";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
array_push($data, $row);
}
}
return json_encode($data);
}
答案 0 :(得分:0)
jQuery on()
函数不能那样工作。另外,option
标签不能可靠地获取点击事件。
您应该同时收听两个select-elemnts更改事件:
$('body').on('click', '#select1, #select2', function() {
if($('#select1').val() != 'default' && $('#select2').val() != 'default')
{
//Do stuff here
}
});
更改事件是通过更改选择字段的值(无论是通过单击还是通过键盘)由用户的操作触发的。