0

私はテキストを入力するためのいくつかの領域を備えたフォームを持っているウェブページを持っており、2つのドロップダウン選択オプションの国が最初のものであり、魔女の国に応じて選択され、2番目はその国が選択する不動産を表示する必要があります。私のページは、国と不動産を取得する場所からデータベースに接続します。国名のテーブルと、国の不動産ごとに1つのテーブルがあります。だから私がやろうとしているのは、フォームをサミットせずに選択された魔女の国に応じて自動的に選択するように状態を変更することです。それは私のデータベースの別のテーブルに新しいエントリを入力するからです。JavaScriptを使用するのが良い方法であることがわかりましたが、別のページに送信したりフォームをサミットしたりしたくないため、私の場合はJavaScriptを機能させることができません。これが私のコードの一部です。どんな助けでも大歓迎です。ありがとう

 $paissql = "SELECT * FROM Paises_table";
 $paisresult = mysql_query($paissql);

 ?>
 <script language="text/javascript">
 function showMe(str)
 {

 <? $estadosql = "SELECT * FROM ".str."_table";
 $estadoresult = mysql_query($estadosql); ?>
 }
 </script>


 <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" ALIGN="CENTER"> 
 <form action="<?php echo $_SERVER['PHP_SELF']?>"  method=POST>
 <TR><th> id </th> <td><?php echo $row_to_edit['id']?></td>
 </TR>
 <TR><th>Nombre:</th><td><input type="TEXT" name=Nombre value="<?php echo      $row_to_edit['Id_Nombre']?>" 
 SIZE="100"></td></TR>        
 </td></TR>
 <TR><th>Pais:</th><td>
 <select name=Pais onchange="showMe(this.value);" > 
 <?
 while($rowp = mysql_fetch_array($paisresult)) {
 $pais = $rowp['Name'];
 ?>
 <option value=<?php echo $pais; ?>
   <?php if($row_to_edit['Pais']==$pais)
 { echo ' selected="true"';} ?>
 ><?php echo $pais; ?>
 </option>
 <?
 }
 ?>
 </select></td></TR>
 <TR><th>Estado:</th><td>
 <select name=Estado >  
 <?

 while($rowe = mysql_fetch_array($estadoresult)) {
 $estado = $rowe['Estado'];
 ?>
 <option value=<?php echo $estado; ?> <?php if($row_to_edit['Estado']==$estado)
 { echo ' selected="true"';} ?>
 ><?php echo $estado; ?></option>
 <?
 }
 ?>
 <TR><th>Ciudad:</th><td><input type="TEXT"  name=Ciudad  value="<?php echo   $row_to_edit['Ciudad']?>" 
 SIZE="100"></td></TR>
 <TR><th>Website:</th><td><input type="TEXT"  name=website  value="<?php echo  $row_to_edit['website']?>" 
 SIZE="100"></td></TR>
 <TR><td> </td>
 <td>
  <input type="HIDDEN"  name="id"  value="<?php echo $edit_id?>">
  Para agregar preciona aqui:
  <input type="SUBMIT"  name="ACTION"  value="AGREGAR">

 </td>
 </TR>
</form>
</TABLE>    
 <BR>
 <BR>
4

1 に答える 1

1

プレーンPHPでの開発は90年代のものであることをご存知だと思います。mysql_*そして、使用することは、ハッカーのためにドアを開けたままにするようなものであることをご存知だと思います。

必要なものは、AJAXおよびイベントバインディングと呼ばれます。基本的に、最初のドロップダウンを観察し、その状態が変化したとき（つまり、ユーザーが国を選択したとき） 、サーバーに非同期リクエストを送信し、その特定の国のリージョンのリストを取得して、2番目のドロップダウンを再構築します。膨大な数の国/地域をサポートする必要がない場合は、リクエストごとにデータベース全体をダウンロードすることをお勧めします。これにより、ユーザーはajax呼び出しを待つ必要がなくなります（小さいながらも知覚できる遅延）が、帯域幅を浪費します。あなたには選択肢があります。

Javascriptの部分に関しては、jQueryのようなライブラリを使用して、イベントを監視し、AJAXを管理することができます。Knockout.jsと一緒に使用することもできます。サーバー側のテクノロジーがPHPではなくASPである場合でも、カスケードドロップダウンのチュートリアルを次に示します。ただし、JSの部分に関心があります。

PHP、jQuery for AJAX、Knockoutを含む簡単なソリューションを用意しました。完全に採用する必要はありません。何千ものバリエーションがあります。少なくとも、何を勉強するかを理解するための出発点があります。

<?php
$countries = array(
    "US" => array("Minnesota", "California", "Washington DC"),
    "China" => array("安徽", "福建", "江苏"),
    "France" => array("Brittany", "Normandy", "Ilé de France"),
    "UK" => array("Galles", "Scotland", "England")
);

if (isset($_REQUEST['json'])) {
    header("Content-Type: application/json; charset=utf-8");
    echo json_encode($countries[$_REQUEST['country']]);
    die();
}

?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script>
var countries = <?php echo json_encode(array_keys($countries)); ?>;

$(function(){

var Model = function(countries) {
    var self = this;

    self.countries = ko.observableArray(countries);

    self.regions = ko.observableArray([]);

    self.getRegions = function() {
        $.get("?json", {"country": $("#country").val()}, function(regions){
            self.regions(regions);
        });
    }
}

var Countries = new Model(countries);

ko.applyBindings(Countries);
// Initialize the second dropdown after binding
Countries.getRegions();

});
</script>
    <title>Cascade dropdown</title>
</head>
<body>
<form>
<table>
    <tr>
        <td>Country:</td>
        <td>
            <select id="country" name="country" data-bind="options: countries,
                event: {change: getRegions}">
            </select>
        </td>
    <tr>
        <td>Region:</td>
        <td>
            <select name="region" data-bind="options: regions">
            </select>
        </td>
    </tr>
</table>
</form>
</body>
</html>
于 2012-09-15T22:09:42.140 に答える