Submit the dynamic select box value to show the mutlipolygon

Question

Here i'm trying to show the multipolygon according to the selection of area in openlayers 3 , e.g. when i select landcover on first select box then on the second box it will shows corresponding value like water bodies , built up area etc. Actually stuck in between of that how to submit the value to show the result on map .

Here's my code This the Html code.

<div class="popup">
 <tr><select id="a1_title"></select></div></tr>
 <tr><select id="a2_title"></select></div></tr>
        <!-- Button (Double) -->
        <div class="form-group">
        <label class="col-md-4 control-label" for="cancel"></label>
        <button type="button" id="cancel" class="btn btn-default cancel">Cancel</button>
        <button type="submit" id="save" class="btn btn-success submit">OK</button>
        </div>
        </div>
    <div id="map" class="map"><div>

This the javascript through which i'm calling value of php page

 // JavaScript Document
        $(document).ready(function(){
               $.getJSON("php/drpdwn.php", success = function(data){
                    var items="";
                    for(var i = 0; i< data.length; i++){
                        // RETAIN JSON KEY AS OPTION VALUE, JSON VALUE AS OPTION TEXT                items +="<option value='"+data[i].id+"'>" + data[i].name+"</option>";
                    }
                    $("#a1_title").append(items); 
                    $("#a1_title").change();
                });
               $("#a1_title").change(function(){

                  // OBTAIN SELECTED VALUE
                  var selectedValue = $(this).find(":selected").text();

                   if( selectedValue == "Landuse/landcover") {

                      $.getJSON("php/lulc_db.php",success = function(data){              
                          var items="";
                          for(var i = 0; i< data.length; i++){

                              items+="<option value='"+data[i]+"'>" + data[i] +"</option>";
                          }
                          // REMOVE PREVIOUS ITEMS
                          var myNode = document.getElementById("a2_title");
                          while (myNode.firstChild) {
                              myNode.removeChild(myNode.firstChild);
                          }
                          // ADD NEW ITEMS
                          $("#a2_title").append(items);  
                      });
                      $("#a2_title").change(function(){
                    //the main problem start from here 
//this the only one which is not working                                 
                        var selectedtext = $(this).find(":selected").text();
                         if( selectedValue == "Built Up") {
                             alert("k");
                        $('input[type="submit"]').on('click',function(){
           $.getJSON("php/geojson.php?layer="+ $(this).text(),success = function(data){
    console.log(data);
            });
        });          }
                         });

                  }
                  else if( selectedValue == "Soil") {         

                      $.getJSON("php/soil_db.php",success = function(data){              
                          var items="";
                          for(var i = 0; i< data.length; i++){

                              items+="<option value='"+data[i]+"'>"+data[i]+"</option>";

                          }
                          // REMOVE PREVIOUS ITEMS
                          var myNode = document.getElementById("a2_title");
                          while (myNode.firstChild) {
                              myNode.removeChild(myNode.firstChild);
                          }
                          // ADD NEW ITEMS
                          $("#a2_title").append(items);       
                      });
                                }  

                });

              });

And this the php page from which i wanted to show the value

<?php
if(isset($_GET["layer"]))
   {
$host = "localhost"; 
$user = "postgres"; 
$pass = "admin"; 
$db = "Querybuilderdb"; 
$con = pg_connect("host=$host dbname=$db user=$user password=$pass")
    or die ("Could not connect to server\n"); 
$sql = "SELECT gid, level_1 , st_asgeojson(geom) AS geojson FROM  pachgaon_lulc where level_1='{$layer}'  ";
$rs = pg_query($con, $sql);
if (!$rs) {
    echo "An SQL error occured.\n";
    exit;
}
# Build GeoJSON feature collection array
$geojson = array(
   'type'      => 'FeatureCollection',
   'features'  => array()
);

# Loop through rows to build feature arrays
while ($row = pg_fetch_array($rs)) {

    $properties = $row;
    # Remove geojson and geometry fields from properties
    unset($properties['geojson']);
    $feature = array(
         'type' => 'Feature',
         'id' => $row['gid'],
         'properties' => array(
          'name' => $row['level_1']
          ),

         'geometry' => json_decode($row['geojson']), 
    );
    array_push($geojson['features'], $feature);
}
header('Content-type: application/json');
echo json_encode($geojson);
}
?>

My most important question how to submit the result on click of "ok" button of matching the condition of both select boxes because i know the way i'm doing its not working at all.I'm very knew in javascript please help me out of this from problem.

Answer 1

Try this ;)

$(document).ready(function(){
  $.getJSON("php/drpdwn.php", success = function(data){
    var items = "";
    for(var i = 0; i < data.length; i++){
      // RETAIN JSON KEY AS OPTION VALUE, JSON VALUE AS OPTION TEXT                items +="<option value='"+data[i].id+"'>" + data[i].name+"</option>";
    }

    $("#a1_title").html(items);
    $("#a1_title").change();
  });

  $("#a1_title").change(function(){
    // OBTAIN SELECTED VALUE
    var selectedValue = $(this).find(":selected").text();

    if(selectedValue == "Landuse/landcover"){
      $.getJSON("php/lulc_db.php", success = function(data){
        var items = "";
        for(var i = 0; i < data.length; i++){
          items += "<option value='" + data[i] + "'>" + data[i] + "</option>";
        }

        /* update options */
        $("#a2_title").html(items);
      });
    }else if(selectedValue == "Soil"){
      $.getJSON("php/soil_db.php", success = function(data){
        var items = "";
        for(var i = 0; i < data.length; i++){

          items += "<option value='" + data[i] + "'>" + data[i] + "</option>";

        }

        /* update options */
        $("#a2_title").html(items);
      });
    }
  });

  $("#a2_title").change(function(){
    //the main problem start from here 
    //this the only one which is not working
    var selectedtext = $(this).find(":selected").text();
    if(selectedtext == "Built Up"){
      alert("k");
      $('input[type="submit"]').on('click', function(){
        $.getJSON("php/geojson.php?layer=" + $(this).text(), success = function(data){
          console.log(data);
        });
      });
    }
  });
});

Problem is here:

/* setting selected option value to `selectedtext` */ 
var selectedtext = $(this).find(":selected").text();
/* trying to get previously set value from `selectedValue` but assigned to `selectedtext` */
if( selectedValue == "Built Up") {

And in your code you are binding change event multiple times

if( selectedValue == "Landuse/landcover") {
...
  $("#a2_title").change(function(){ /* binding change event every time if condition is evaluated to true */

in if condition

and one more thing the way of removing options from select element you can simply use replace html using $().html() or just call $().remove();