jQuery-附录在HTML中显示双引号
[英]Jquery - Append shows double quotes in html
问题描述
I have a html and js file. 
我有一个html和js文件。 I'm trying to test the Google maps with javascript. 我正在尝试使用javascript测试Google地图。 I want to be able to dynamically add positions into the select. 我希望能够将位置动态添加到选择中。 For some reason, the # sign is not working. 由于某些原因，＃号不起作用。 I'm sure it's something easy I'm just missing. 我敢肯定，我只是想念这件事而已。
When I use this code... 当我使用此代码时...
$('start').append('<option value="foo" selected="selected">Foo</option>');
Why is the output... 为什么输出...
"<option value="foo" selected="selected">Foo</option>"
It shows double quotes and doesn't display as HTML. 它显示双引号，并且不显示为HTML。
HTML HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div id="formAdd">
<h1>Add Site</h1>
<label for="name">Name:</label>
<input type="text" id="name"><br>
</div>
<br/><br/>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
</select>
<b>End: </b>
<select id="end">
</select>
</div>
<br/><br/>
<div id="googleMap" style="width:50%;height:400px;float:left"></div>
<div id="parent" style="float: left">
<ul id="list">
</ul>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
<script src="map.js"></script>
</body>
Here is my JS file 这是我的JS文件
var positions = [];
var names = [];
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
initMap();
}
function getCurrentLocation(callback) {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
callback(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
});
}
else {
throw new Error("Your browser does not support geolocation.");
}
}
function initMap() {
//Create new map in googleMap div
map = new google.maps.Map($("googleMap"), {
zoom: 10
});
//Get the current location
geoLocation(map);
//Map clicked, create marker
map.addListener('click', function(e) {
createMarker(e.latLng, map);
for (var i = 1; i <= positions.length-1; i++) {
$("start").append('<option value="(40.23277990064058, -75.04673282753907)">Test</option>');
}
});
}
function createMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: $("name").value
});
//alert(marker.position);
positions[positions.length] = marker.position;
names[names.length] = marker.title;
}
3 个解决方案
解决方案1
1 2019-05-10 02:37:33
Firstly, you should use #start for the ID selector. 首先，您应该使用#start作为ID选择器。 Secondly, it works fine: 其次，它工作正常：
$('#start').append('<option value="foo" selected="selected">Foo</option>');
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <select id="start"></select>
解决方案2
1 2019-05-10 03:12:43
Hello I'm new at this and I'm not entirely sure if this is correct, but maybe you can try this code 您好，我是新手，我不确定这是否正确，但也许您可以尝试以下代码
$("#start").append("<option value='"+(40.23277990064058, -75.04673282753907)+"'>Test</option>");
I just put # and some quotation mark 我只加＃和一些引号
解决方案3
1 已采纳 2019-05-10 04:39:42
This code is going to be slightly different than yours because I went and created this from scratch and pieced in the relevant parts of your code. 这段代码将与您的代码稍有不同，因为我从头开始创建了代码，并将其切入代码的相关部分。 But I hope this helps. 但我希望这会有所帮助。 My code is now inserting select options for the clicks (when a name is provided in the input field). 我的代码现在正在为点击插入选择选项（在输入字段中提供名称时）。
var positions = [];
var names = [];
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//Map clicked, create marker
map.addListener('click', function(e) {
createMarker(e.latLng, map);
var start = document.getElementById("start");
var locationName = document.getElementById("name").value;
start.options[start.options.length] = new Option(locationName, '40.23277990064058, -75.04673282753907');
});
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
function createMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: document.getElementById("name").value
});
//alert(marker.position);
positions[positions.length] = marker.position;
names[names.length] = marker.title;
}
Notice I dropped the jquery reference and used vanilla javascript to select elements. 注意，我删除了jquery引用，并使用了普通javascript来选择元素。 This was because the '#' was giving you trouble previously (and the google docs were using vanilla js, so I went that route as well). 这是因为“＃”以前给您带来麻烦（并且Google文档使用的是香草js，所以我也选择了这条路线）。 I hope this helps, but let me know if this doesn't cover what you need. 希望对您有所帮助，但是如果这不能满足您的需求，请告诉我。
-Also, I've hardcoded the location data in, you'll probably want to get that back dynamically once you get this working. -另外，我已经将位置数据进行了硬编码，一旦开始工作，您可能希望动态地将其取回。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.