我有一个正在处理的地图项目,我创建了一个包含所有国家/地区的下拉菜单列表,但是当从下拉列表中选择一个国家/地区时,我希望它向我显示该国家/地区。到目前为止,我已经创建了一个 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);
?>