Ajax+PHP更新下拉框 （以解决，怎么结帖？）

时间：2022-11-21 20:48:23
自己的帖子不能自问自答吗？为什么没有办法结帖给分呢？请版主帮忙

如题，demo页面中有一个form，包含两个select，第一个是种类type，第二个是配置config，不同种类有不同的配置，当用户选择了某个种类以后，根据所选种类需要更新第二个select中选项的内容。
比如种类的选项有：VM, Server, DCA
选择vm的话，配置只有single host,选择DCA的话，配置从0到48不等。
我网上搜了一下，有很多Ajax+PHP的实现，自己也写了个代码。。但第二个选项框中总是得不到想要的值，麻烦各位帮看一下代码有什么问题，谢谢！

demo页面 
<html>

  <head>

    <meta charset="utf-8">

  <title>Reservation System</title>

  

      <link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">

    

    <link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css">

    <link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css">

    <link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css">

    <link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css">

    

    <link rel="stylesheet" href="css/mrbs.css.php" type="text/css">

        <link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">

    <meta name="robots" content="noindex">

    

<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script>

<script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script>

<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script>

<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script>

     

  <script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script>

  <script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script>


<script type="text/javascript">

       var xmlhttp;

       var url;

       function createXMLHttpRequest() {

          if (window.XMLHttpRequest)

             xmlhttp = new XMLHttpRequest();

          else

             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

       }


       function showConfig(str) {

          url = "getOptions.php?type="+str;

          createXMLHttpRequest();

          xmlhttp.open("GET",url,true);

          xmlhttp.send(null);


          xmlhttp.onreadystatechange = function() {handleStateChange()};

        }

       

       function handleStateChange() {

          if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

          {

                var str = xmlhttp.responseText;

                alert (url);

                createConfig(str);

           }

        }


       function createConfig(str) {

          var configs = str;

          var config = configs.split(",");

          while (document.getElementById("config").options.lengt>0)

                 document.getElementById("config").options.remove(0);

          for (var i=0; i<config.length; i++)

          {

                var ooption = document.createElement("option");

                ooption.value = config[i];

                ooption.text = config[i];

                document.getElementById("config").add(ooption);

           }

        }

</script>


<form id="add_room" class="form_admin" action="add.php" method="post">

      <fieldset>

      <legend>Add DCA</legend>

        <input type="hidden" name="type" value="room">

        <input type="hidden" name="area" value="2">

        

        <div>

          <label for="room_name">Name:</label>

          <input type="text" id="room_name" name="name" maxlength="50">

        </div>

        

        <div>

          <label for="room_description">Description:</label>

          <input type="text" id="room_description" name="description" maxlength="100">

        </div>


        <div>

          <label for="room_type">Type:</label>

          <select class="room_area_select" id="type_select" name="area" onchange="showConfig(this.value)"><option  value="VM">VM</option><option  value="Server">Server</option><option  value="DCA-V1">DCA-V1</option><option  value="DCA-V2">DCA-V2</option></select>

        </div>    


       <div>

        <label for = "config">config:</label>

        <select id="config" ></select>

       </div>


      </fieldset>

    </form>


这个是getOptions.php文件，根据给定select的值返回相应的配置值 
<?php

$type = $_GET['type'];

echo $type;

$result = "";

if ($type == "DCA-V1") {

       for ($i=0;$i<47;$++)

          $result .= $i.",";

       $result .= "48";

}


else if ($type == "Server")

       $result .= "single node";


else if ($type == "VM") {

       $result .= "single host";

}

echo $result;

?>

2 个解决方案

#1

问题解决了，代码中有两个typo
getOptions中 for ($i=0;$i<47;$++) 少了一个"i"

demo的javascript createConfig函数中 while (document.getElementById("config").options.lengt>0) "length"少了一个h

。。。[/img] 一下午就干了这些

#2

没其他人回复是不能结的，只能无满意答案结贴。。

建议楼主调试js程序用chrome浏览器或者firefox+firebug，2个都不错，个人习惯用firebug，可以显示哪些js代码出错，监视xhr请求和返回了什么

#1

问题解决了，代码中有两个typo
getOptions中 for ($i=0;$i<47;$++) 少了一个"i"

demo的javascript createConfig函数中 while (document.getElementById("config").options.lengt>0) "length"少了一个h

。。。[/img] 一下午就干了这些

#2

没其他人回复是不能结的，只能无满意答案结贴。。

建议楼主调试js程序用chrome浏览器或者firefox+firebug，2个都不错，个人习惯用firebug，可以显示哪些js代码出错，监视xhr请求和返回了什么
标签：

相关文章