Link Values/Get variables of two different select option with jquery-CodePudding

i have a simple php page called ( time.php )

<?php

if($_GET['region'] == "europe" and !isset($_GET['timeformat'])){
   $array = array("Berlin" => "15:30", "Paris" => "14:30", "London" => "16:30");
}elseif($_GET['region'] == "europe" and $_GET['timeformat'] == "24hours"){
   $array = array("Berlin" => "15:30", "Paris" => "14:30", "London" => "16:30");
}elseif($_GET['region'] == "europe" and $_GET['timeformat'] == "12hours"){
   $array = array("Berlin" => "03:30 PM", "Paris" => "02:30 PM", "London" => "04:30 PM");
}

echo json_encode($array);
?>

and i also have html page called ( jquery.html )

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
   $("#select-opt").change(function() {
   var $option = $(this).find(':selected');
       $.ajax({
           type: 'GET',
           url: 'time.php',
           data: $option.val(),
           dataType: 'json',
           cache: false,
           success: function(result) {
               $('#Jax').html(result['Berlin']);
               $('#Jax2').html(result['Paris']);
               $('#Jax3').html(result['London']);
           },
       });
   });
   
   $("#select-opt2").change(function() {
   var $option = $(this).find(':selected');
       $.ajax({
           type: 'GET',
           url: 'time.php',
           data: $option.val(),
           dataType: 'json',
           cache: false,
           success: function(result) {
               $('#Jax').html(result['Berlin']);
               $('#Jax2').html(result['Paris']);
               $('#Jax3').html(result['London']);
           },
       });
   });
});
</script>

</head>

<body>

<div id="Jax" style="display: block;height: 20px;"></div>
<div id="Jax2" style="display: block;height: 20px;"></div>
<div id="Jax3" style="display: block;height: 20px;"></div>


<select id="select-opt" autocomplete="off">
 <option selected="">Select one</option>
 <option value="region=europe">Europe</option>
 <option value="region=asia">Asia</option>
 <option value="region=africa">Afria</option>
</select>

<select id="select-opt2" autocomplete="off">
 <option selected="">Select one</option>
 <option value="timeformat=12hours">12 Hours Format</option>
 <option value="timeformat=24hours">24 Hours Format</option>
</select>
</body>
</html>

all what i need, is updating the content according to the (select option) without reloading the whole page

but i need to link the values of the two different ( select options ) together. when i select Europe in the first select i want to see the time in 12 Hour format as a default. and when i select 24 Hours format from the second select i need to change the same times to 24 hours format without reloading the page.

i'm newbie with jquery and i don't know how can i do that i tried to change the second select values on any change in the first one but i failed

CodePudding user response：

Use an object as the data: parameter, with both region and timeformat properties that you set from each menu.

$(document).ready(function() {
  $("#select-opt, #select-opt2").change(function() {
    var region = $("#select-opt").val();
    var timeformat = $("#select-opt2").val();
    $.ajax({
      type: 'GET',
      url: 'time.php',
      data: {region, timeformat},
      dataType: 'json',
      cache: false,
      success: function(result) {
        $('#Jax').html(result['Berlin']);
        $('#Jax2').html(result['Paris']);
        $('#Jax3').html(result['London']);
      },
    });
  });
});