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

Question

我的下拉列表从我的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>'; 
      } 
      } 
     }); 
    } 
//} 

Answer 1

你是不是引用您的期权价值属性，所以空间是指属性值

0123年底

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