Question

我有一个demo.html页面，其中包含两个选项，第一个是“Type”，第二个是“Config”，当我在第一个选择中选择某个类型时，我想使用ajax更新第二个选择中的值。例如，Type可能具有以下值：VM，Server，DCA VM只有配置“singe node”，但DCA有Config“d0” - “d48”。所以如果我在第一个选择中选择DCA，我应该在第二个选择中有49个选项。

我在网上搜索并找到了一些解决方案，然后我自己编写了一些代码。现在的问题是，无论我在第一个选择中选择什么，第二个都不会更新，它总是返回null。

不确定概率在哪里，代码看起来很好:(感谢您的帮助。

演示页

<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文件

<?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;
?>

Answer 1

由于您已在页面中使用jQuery，我建议使用jQuery的ajax选项。

以下应该工作。相应地更新它。

<强> 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;
?>

演示页

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

尝试提供一些评论。

如果您需要帮助，请告诉我们。

Ajax + PHP实现级联选择

1 个答案: