从两个下拉菜单中选择值后，开始处理

Question

我有两个独立的下拉菜单，可以正常工作。 我想允许用户一次从两个菜单中选择值并开始处理结果。 例如，用户将不得不从一个菜单中选择国家名称，而从另一菜单中选择准确性级别。 然后系统应在地图上显示一些图像。 目前我有这样的事情。

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);
            }

        });             
});
}); 

邮递区号：

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

}

Answer 1

jQuery on()函数无法以这种方式工作。 另外， option标签不能可靠地获得点击事件。

您应该听这两个select-elemnts更改事件，如下所示：

$('body').on('click', '#select1, #select2', function() {
    if($('#select1').val() != 'default' && $('#select2').val() != 'default')
    {
        //Do stuff here
    }
});

更改事件是在更改选择字段的值时（无论是通过单击还是通过键盘）由用户的操作触发的事件。