从下拉菜单中选择国家/地区时突出显示该国家/地区

时间:2021-07-12 10:47:12

标签: javascript

我有一个正在处理的地图项目,我创建了一个包含所有国家/地区的下拉菜单列表,但是当从下拉列表中选择一个国家/地区时,我希望它向我显示该国家/地区。到目前为止,我已经创建了一个 onClick 事件处理程序,但不确定如何让该国家/地区突出显示所选国家/地区。我正在使用 countryBorders.geo.json、php 和 js。

// Select Country //
function borders() {
  var mycountry = document.getElementById('Countries');
  selectedCountries = mycountry.value;
  //  js that scans the countryborders results for a selected
  // for loop for the "results" array. Thats searchs that array for a given country name 
  //when you find the country you need, capture the coords for that country, 
  // feed those coords into map 
}
$(document).ready(function() {
  $.ajax({
    url: "php/countryBorders.php",
    type: 'POST',
    dataType: 'json',
    success: function(result) {
      console.log(JSON.stringify(result));
      if (result.status.name == "ok") {
        for (var i = 0; i < result["data"].length; i++) {
          $("#Countries").append(`$<option value= "${result['data'][i]
                        ['iso_a2']}">${result['data'][i]['name']}</option>`);
        };
      };
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // your error code
      console.log(errorThrown);
      console.log(jqXHR.responseText);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark navbar">
  <a class="navbar-brand" href="#"><img src="img/LOGO2.png" width="50px" height="auto" alt="SP Logo"><span class="nav-title">Gazetteer<span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" 
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse .dropdown-menu-dark" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"></li>
        <li class="nav-item">
          <select id="Countries" class="cBorders" onclick="borders();">
            <option value="">Select a Country</option>
          </select>
        </li>
    </div>
</nav>

PHP

<?php
    // remove for production
    ini_set('display_errors', 'On');
    error_reporting(E_ALL);
    $executionStartTime = microtime(true);
    $result = file_get_contents(
        "countryBorders.geo.json" 
    );
    $decode = json_decode($result,true);
    $propJson = [];
    $i = 0;
    for ($i = 0; $i < count($decode['features']); $i++) {
    array_push($propJson,$decode['features'][$i]['properties']);
    // echo json_encode($decode['features'][$i]);
    };
    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
    $output['data'] = $propJson;
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($output); 
?>

0 个答案:

没有答案