0

我的下拉列表从我的 MySQL 数据库中正确填充。

当我选择一个单词的标记（例如“Home”）时，startname 和 endname 变量写入正确，我遇到的问题是，当我在下拉列表中有一个带有空格的值时，只返回第一个单词。

因此，如果“中央公园”是下拉列表中的值，则变量设置为“中央”

这是下拉列表的代码，calcroute函数的javascript如下：

     <div id="control_panel" style="float:right;width:80%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
<?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '<option value='.$t['name'].'>'.$t['name'].'</option>';
    }
  //end of foreach/while
?>    </select>
<br>
    <b>End:</b>
    <select id="end">
 <?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '<option value='.$t['name'].'>'.$t['name'].'</option>';
    }
  //end of foreach/while
?>    </select>
    <b>Waypoints:</b> 
    <select multiple id="waypoints">
<?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '<option value='.$t['name'].'>'.$t['name'].'</option>';
    }
  //end of foreach/while
?>    </select>
      <input type="submit" onclick="calcRoute();">
    </div>

Javascript函数： 

function calcRoute() {
        var startname = document.getElementById('start').value;
        console.log(startname)
        var endname = document.getElementById('end').value;
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected == true) {
              $.ajax({
                    url:'phpsearch2.php', 
                    dataType:'json', 
                    data:{name:checkboxArray[i].value},
                    async:false,
                    success:function (result)
                    {
    //              console.log(result)
                    waypoint = new google.maps.LatLng(result[0].lat, result[0].             lng);
            }});
            waypts.push({
                location:waypoint,
                stopover:true});
          }
        }

$.ajax({
    url:'phpsearch2.php', 
    dataType:'json', 
    data:{name:startname},
    async:false,
    success:function (result)
{
//  console.log(result)
    origin = new google.maps.LatLng(result[0].lat, result[0].lng);
}});

$.ajax({
    url:'phpsearch2.php', 
    dataType:'json', 
    data:{name:endname},
    async:false,
    success:function (result)
{
//  console.log(result)
    end = new google.maps.LatLng(result[0].lat, result[0].lng);
}});

    var request = {
            origin: origin,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };

            directionsService.route(request, function(response, status) {
        document.write('<b>'+ origin +'</b>');
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions_panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Time for a Walkabout </b><br>';
              summaryPanel.innerHTML += '<b>From ' + startname + '   </b>';
              summaryPanel.innerHTML += '<b>to ' + endname + '('+ route.legs[i].distance.text +')</b><br>';
//            summaryPanel.innerHtml += '<b>' + waypts.toString() + '   </b>';
          } 
          }
        });
     }
//}
4

1 回答 1

2

您没有引用您的选项值属性，因此空格表示属性值的结尾

echo '<option value="'.htmlspecialchars($t['name']).'">'.htmlspecialchars($t['name']).'</option>';
                  //^                                ^
于 2013-04-17T02:27:30.737 回答