0

私は2つの選択を含むdemo.htmlページを持っています。最初の選択は「タイプ」で、2番目の選択は「構成」です。最初の選択で特定のタイプを選択すると、ajaxを使用して値を更新したい2番目の選択で。たとえば、Type には次の値があります。VM、Server、DCA、および VM には構成「singe node」のみがありますが、DCA には構成「d0」-「d48」があります。したがって、最初の選択で DCA を選択すると、2 番目の選択で 49 のオプションが必要になります。

オンラインで検索していくつかの解決策を見つけた後、自分でコードを書きました。問題は、最初の選択で何を選択しても、2 番目の選択が更新されず、常に 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;
?>
4

1 に答える 1

0

ページですでに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>

いくつかのコメントを提供しようとしました。

サポートが必要な場合はお知らせください。

于 2013-03-19T06:19:48.160 に答える