个人中心
gpt4 book ai didi

JavaScript If 语句和组合框功能

转载 作者：行者123 更新时间：2023-12-03 01:05:52 24 4
gpt4 key购买 nike

我有两个独立工作的组合框。我想让他们一起工作。我要么查询州名称，要么查询农场面积。我无法让它们一起过滤。

查询德克萨斯州和 4 英亩。获取德克萨斯州所有 4 英亩的县。现在，它要么给我整个德克萨斯州，要么给我美国所有 4 英亩的县。

if 语句位于“app”对象中。

<!DOCTYPE html>    
<html>    
  
<head>    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />    
  <title>Drop Down Test</title>    
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">       
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">    
  <style>    
    html,    
    body,    
    #mainWindow {    
      height: 100%;    
      width: 100%;    
      margin: 0;    
      padding: 0;    
    }    
    body {    
      background-color: #FFF;    
      overflow: hidden;    
      font-family: "Trebuchet MS";    
    }    
    #header {    
      height: 3%;    
      overflow: auto;    
    }    
  </style>    
  <script>    
    var dojoConfig = {    
      parseOnLoad: true    
    };    
  </script>    
  <script src="http://js.arcgis.com/3.10/"></script>    
  <script>    
    var map;    
    require([    
      "esri/map",    
      "dojo/on",    
      "esri/tasks/query",    
      "esri/layers/FeatureLayer",    
      "dojo/store/Memory",    
      "dojo/_base/array",    
      "dojo/_base/lang",    
      "esri/request",    
      "dojo/json",    
      "dijit/layout/BorderContainer",    
      "dijit/layout/ContentPane",    
      "dijit/form/Button",    
      "dijit/form/ComboBox",    
      "dojo/domReady!"    
    ], function(    
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json    
    ) {    
      map = new Map("map", {    
        basemap: "topo",    
        center: [-98.579729, 39.828366],    
        zoom: 5    
      });    
  
      var crops = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0", {    
        mode: FeatureLayer.MODE_SELECTION,    
        outFields: ["*"]    
      });    
  
      map.addLayers([crops]);    
      map.on("layers-add-result", lang.hitch(this, function(){    
        var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0/generateRenderer";    
        var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["STATE"]};  
        var classificationDef2 = {"type":"uniqueValueDef","uniqueValueFields":["TotalFarmedAcres"]};  
        var str = json.stringify(classificationDef);  
        var str2 = json.stringify(classificationDef2);  
        esriRequest({    
          url:url,    
          content:{    
            classificationDef:str,    
            f:'json'    
          },    
          handleAs:'json',    
          callbackParamName:'callback',    
          timeout:15000    
        }).then(lang.hitch(this,function(response){    
          var uniqueValueInfos = response && response.uniqueValueInfos;    
          if(uniqueValueInfos){    
            var store2 = new Memory({data:[]});    
            dijit.byId("uniqueValuesSelect").set('store',store2);    
            var data = array.map(uniqueValueInfos,lang.hitch(this,function(info,index){    
              var value = info.value;    
              //value = parseFloat(value);    
              var dataItem = {    
                id:index,    
                name:value    
              };    
              return dataItem;    
            }));    
            store2 = new Memory({data:data});    
            dijit.byId("uniqueValuesSelect").set('store',store2);    
          }    
        }),lang.hitch(this,function(error){    
          console.error(error);    
        }));  
        esriRequest({    
          url:url,    
          content:{    
            classificationDef:str2,    
            f:'json'    
          },    
          handleAs:'json',    
          callbackParamName:'callback',    
          timeout:15000    
        }).then(lang.hitch(this,function(response){    
          var uniqueValueInfos2 = response && response.uniqueValueInfos;    
          if(uniqueValueInfos2){    
            var store3 = new Memory({data:[]});    
            dijit.byId("uniqueValuesSelect2").set('store',store3);    
            var data2 = array.map(uniqueValueInfos2,lang.hitch(this,function(info,index){    
              var value2 = info.value;    
              //value2 = parseFloat(value2);    
              var dataItem2 = {    
                id:index,    
                name:value2    
              };    
              return dataItem2;    
            }));    
            store3 = new Memory({data:data2});    
            dijit.byId("uniqueValuesSelect2").set('store',store3);    
          }    
        }),lang.hitch(this,function(error){    
          console.error(error);    
        }));  
      }));    
  
      app = {    
        zoomRow: function(id, which){     
          crops.clearSelection();    
          var query = new Query();  
          if(which == "statename"){  
            query.where = "STATE='" + (id).toString() + "'";   
          }if(which == "FarmedAcres"){  
            query.where = "TotalFarmedAcres='" + (id).toString() + "'";   
          }  
          console.info(query.where);  
          query.returnGeometry = true;    
          crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {    
            //var thePoly = features[0].geometry;    
            //var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent     
            //map.setExtent(theExtent);    
          });    
        }    
      };    
  
    });    
  </script>    
</head>    
  
<body class="claro">    
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">    
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State and total Acres farmed:      
      <input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="statename" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, 'statename');" />  
      <input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="FarmedAcres" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect2').value, 'FarmedAcres');" />  
    </div>    
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>    
  </div>    
</body>    
  
</html>

最佳答案

您需要有权访问两个组合框，以便可以执行以下操作:

app = {    
    zoomRow: function(stateId, acresId){     
      crops.clearSelection();    
      var query = new Query(); 
      query.where = "STATE='" + (stateId).toString() + "' AND TotalFarmedAcres='" + (acresId).toString() + "'";   
      console.info(query.where);  
      query.returnGeometry = true;    
      crops.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {    
        //var thePoly = features[0].geometry;    
        //var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent     
        //map.setExtent(theExtent);    
      });    
    }    
  };

这意味着 html 应该是这样的 

<input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="statename" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, document.getElementById('uniqueValuesSelect2').value);" />  
<input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="FarmedAcres" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value, document.getElementById('uniqueValuesSelect2').value);" />

为stateId、acresId添加相应的验证以避免空值或未定义的值

关于JavaScript If 语句和组合框功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52414082/

24 4 0
文章推荐： javascript - 确定调用了哪些 AngularJS 函数
文章推荐： javascript - 使用 laravel、vue.js 和 axios 删除 owl 幻灯片
文章推荐： javascript - 在 vanilla JS 中执行脚本期间更新 HTML 元素的内容
文章推荐： javascript - readFile 未在 while 循环内运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com