Question

这里我试图根据开放层3中区域的选择来显示多边形，例如，当我在第一个选择框中选择landcover然后在第二个框中它将显示相应的值，如水体，建立区域等。实际上卡在两者之间，如何提交值以在地图上显示结果。

这是我的代码这是Html代码。

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

这是我通过它调用php页面值的javascript

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

                });

              });

这是我想要显示值

的php页面

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

我最重要的问题是如何通过点击“ok”按钮提交结果来匹配两个选择框的条件，因为我知道我正在做它不工作的方式。我非常了解javascript请从问题中解决这个问题。

Answer 1

试试这个;）

/* 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") {

问题出在这里：

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

在您的代码中，您多次绑定更改事件

$().html()

in if condition

还有一个方法是从select元素中删除选项，您只需使用$().remove()替换html或只调用$birthday[Carbon::now()->format('Y-m-d')] = User::whereRaw("DATE_FORMAT(birthday, '%m-%d') = DATE_FORMAT(now(),'%m-%d')") ->orWhereRaw("DATE_FORMAT(birthday,'%m-%d') = '02-29' and DATE_FORMAT(birthday, '%m') = '02' AND LAST_DAY(NOW()) = DATE(NOW())") ->selectRaw('first_name, last_name, email, birthday') ->get(); $birthday[Carbon::now()->addDay()->format('Y-m-d')] = User::whereRaw("DATE_FORMAT(birthday, '%m-%d') = DATE_FORMAT(NOW() + INTERVAL 1 DAY, '%m-%d')") ->orWhereRaw("DATE_FORMAT(birthday,'%m-%d') = '02-29' and DATE_FORMAT(birthday, '%m') = '02' AND LAST_DAY(NOW()) = DATE(NOW())") ->selectRaw('first_name, last_name, email, birthday') ->get(); return $birthday;;

提交动态选择框值以显示mutlipolygon

1 个答案: