dongpo9071 2013-03-19 05:02
浏览 68
已采纳

Ajax + PHP实现级联选择

I have a demo.html page, which contains two selections, the first one is "Type", and the second one is "Config", when I choose a certain type in the first selection, I want to use ajax to update the values in the second selection. For example, Type may have values: VM, Server, DCA and VM only has config "singe node", but DCA has Config "d0"-"d48". so if I select DCA in the first selection, I should have 49 options in the second one.

I searched online and did find some solutions, then I wrote some code by myself. The problem now is that whatever I select in the first selection, the second one will not be updated, it always return null.

Not sure where the prob is, the code looks fine :( Thanks for any help.

demo page

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

<?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;
?>
  • 写回答

1条回答 默认 最新

  • dsbgltg159136540 2013-03-19 06:19
    关注

    As you are already using jQuery in your page, I suggest jQuery's ajax option.

    Following should work. Update it accordingly.

    getOptions.php

    <?php
    $type = $_GET['type'];
    $result = "";
    if ($type == "DCA-V1") {
        for ($i=0;$i<47;$i++)
            $result .= $i.",";
        $result .= "48";
    } else if ($type == "Server") {
        $result .= "single node";
    } else if ($type == "VM") {
        $result .= "single host";
    }
    echo $result;
?>

    Demo Page

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

            $(document).ready(function() {
                $('#type_select').change(function() {

                    //Get current item's value
                    var type = $(this).val();

                    $.ajax({
                        url : "getOptions.php?type=" + type,
                        success : function(data) {
                            var result, opts = "";

                            //We get comma separated data
                            result = data.split(',');
                            //Prepare options
                            for(var i = 0; i < result.length; i++) {
                                opts += "<option value='" + result[i] + "'>" + result[i] + "</option>";
                            }
                            //Populate second select
                            $('#config').html(opts);
                        },
                        error : function() {
                            alert("Error");
                        }
                    });
                });

                //By default populate options for currently selected item
                $('#type_select').trigger('change');
            });
        </script>
    </head>
    <body>
        <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">
                        <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>
    </body>
</html>

    Tried providing some comments.

    Let us know if you need any help.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题