Javascript document.getElementById未从下拉列表中返回完整值

Question

My dropdown list is populating correctly from my MySQL DB.

When I select a marker of one word such as 'Home' the startname and endname vairables write correctly, the problem I am having is that when I have a value in the dropdown list with spaces only the first word is returned.

So if 'Central Park' is the value in the dropdown the variables are set to just 'Central'

Here is the code for the dropdown, the javascript for the calcroute function is below:

     <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:

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>';
          } 
          }
        });
     }
//}

Answer 1

You are not quoting your option value attributes so a space means the end of the attribute value

echo '<option value="'.htmlspecialchars($t['name']).'">'.htmlspecialchars($t['name']).'</option>';
                  //^                                ^