從兩個下拉菜單中選擇值后，開始處理

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

更改事件是在更改選擇字段的值時（無論是通過單擊還是通過鍵盤）由用戶的操作觸發的事件。