Start Processing when values from two drop down menus have been selected

Question

I have two independent drop down menus that work fine. I want to allow user to choose values from both menus at once and start processing results. eg user would have to choose country name from one menu and accuracy level from other menu. Then system should display some images on map. Currently I have something like this.

js file

$(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 Code:

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

The jQuery on() function does not work that way. In addition option tags do not reliably get click-events.

You should listen to both your select-elemnts change events like this:

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

Change events get triggered by a user's action when changing the value of a select field, whether that be by click or keyboard.