使用ajax / php调用选择选项标签不会改变?

时间:2014-02-28 20:39:58

标签: php ajax jquery-mobile

下面的代码尝试通过在服务器上进行连接到PHP的Ajax调用并检索数据来更改Select选项标记。但是,如果我将响应文本设置为span标记但是它对Select选项标记不起作用,则下面的代码可以正常工作吗?

<?php

$q = intval($_GET['q']);

$con=mysqli_connect("localhost","rot","ro","abc","3306");

/

if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


$result = mysqli_query($con,"SELECT DISTINCT(UniqueBusId) FROM cfv_busstopnames WHERE busnumber = ".$q." ");


if (!$result) {
    printf("Error: %s\n", mysqli_error($con));
    exit();
}


while($row = mysqli_fetch_array($result))
  {
   echo "<option>" . $row['UniqueBusId'] . "</option>" ;

  }

mysqli_close($con);


?>

<script>
  function showUser(str)
  {

  if (str=="")
    {
    document.getElementById("txtHint").innerHTML="";
    return;
    } 
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("select-choice-direction").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","getdirection.php?q="+str.value,true);
  xmlhttp.send();
  }


</script>
<Body>
  <label for="select-choice-direction">Direction</label>
  <select name="select-choice-direction" id="select-choice-direction" data-native-menu="false" ">
    <option> Direction heading towards?</option>
    <option value="X">X</option>
    <option value="Y">Y</option>
    <!-- etc. -->
  </select>
</Body>

1 个答案:

答案 0 :(得分:1)

而不是

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       document.getElementById("select-choice-direction").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
        $('#select-choice-direction').html(xmlhttp.responseText).selectmenu( "refresh");
     }
}

这告诉jQuery Mobile刷新selectmenu小部件(http://api.jquerymobile.com/selectmenu/#method-refresh

  

<强> DEMO