12

mysql データベースから両方のドロップダウンのレコードを取得して 2 つのドロップダウン (州と都市など) を構築し、その時点で最初のドロップダウンから任意の値 (つまり、任意の州) を選択するツールを構築しようとしています。 2 番目のドロップダウン (都市) では、最初のドロップダウンで選択された値 (州) の下にある値 (都市) のみが表示されます。

これが私のコードです：

<tr>    
        <td id='hed'><span style="font-family:verdana,geneva,sans-  serif">State</state></td>
        <td>
        <?php 
        $dbcon = mysql_connect("@ip","@username","@password");

        if($dbcon)
        {
            mysql_select_db("@database", $dbcon);
        }
        else
        {
            die('error connecting to the database');
        }

        $qry = "select @value(state) from @tablename  ";
        $result = mysql_query($qry) or die(mysql_error());

        $dropdown = "<select name='@valuename' id='officeItemList' style='cursor:pointer;cursor:hand;'>";
        while($row = mysql_fetch_array($result))
        {           
            $dropdown .= "\r\n<option value='{$row['@value']}' > {$row['@value']} </option>";
        }
        $dropdown .= "\r\n</select>"; 
        echo $dropdown;
        mysql_close($dbcon);
        ?>
        </td> 
    </tr>

        <tr>
        <td id='hed'><span style="font-family:verdana,geneva,sans-serif">City</span></td>
        <td colspan="1"> 
        <?php 
        $dbcon = mysql_connect("@ip","@username","@password");

        if($dbcon)  
        {
            mysql_select_db("@database", $dbcon);
        }  
        else
        {
            die('error connecting to the database');
        }  

        $qry = "select value2(city) from @tablename where ";
        $result = mysql_query($qry) or die(mysql_error()); 

        $dropdown = "<select name='@value2' id='officeItemList' style='cursor:pointer;cursor:hand;'>";
        while($row = mysql_fetch_array($result)) 
        {

            $dropdown .= "\r\n<option value='{$row['@value2']}' > {$row['@value2']} </option>";
        }
        $dropdown .= "\r\n</select>"; 
        echo $dropdown;
        mysql_close($dbcon);
        ?>      


        </td>
    </tr>
4

4 に答える 4

6

それは間違った方法です。ユーザーにページを表示する前に、 PHP コードが完全に実行されます。したがって、2 番目のクエリは、ユーザーが何かを選択したことを知ることはできません。

正しい方法 #1: 2 ページで行う。最初のページには最初のコンボが含まれ、送信されると 2 番目のページが生成され、2 番目のコンボが表示されます。

正しい方法 #2 最適ではありません: 1 ページで行います。2 番目のコンボのすべての可能なレコードを JS 配列にロードします。リスナーを最初の配列に配置します。ユーザーが何かを選択すると、2 番目のコンボが JS 配列の適切なレコードで埋められます。

正しい方法 #3 (最も右側): AJAX 要求を含むページで実行します。ユーザーは最初のコンボで値を選択します。そのリスナーは、2 番目のコンボのレコードを含む JSON オブジェクトを返すサーバー スクリプトにリクエストを送信します。

于 2012-12-19T13:13:09.347 に答える
3

AJAX を使用して、選択した州の都市を取得できます。何かのようなもの：

$("select#state").change(
function(){
   var state = $(this).val();
   $.ajax({
  type: "GET",
  url: "get_cities.php/?state=" + state, 
// write a query according to the state selected and return the HTML for the OPTION's
  success: function(cities){
    $("select#cities").html(cities);
   }
}); 
}
);

また、json オブジェクトを返し (この場合は を追加することを忘れないでくださいdataType:"json")、クライアント側、つまりsuccess関数内で HTML に移行することもできます。

于 2012-12-19T13:13:24.283 に答える
1

私があなたに提案する2つのアプローチがあります。

最初のものはphpのみを使用しますが、ページがレンダリングされる前に、州ごとに利用可能なすべての都市を保存する必要があります。これは悪い解決策です！

AJAXと別のPHPスクリプトへのJavascript呼び出しを使用すると、問題を解決できることをお勧めします。

jQueryを使用して、ライブを容易にするjavascriptフレームワークを取得してください。

あなたのHTML：

<select id="select-state">
    <option value="0">Select a state</option>
    <option value="ohio">Ohio</option>
</select>
<select id="select-city">
    <option value="0">Select a state first</option>
</select>

$ _GET ["state"]（または$ _POST）を介して、指定された状態でmysqlクエリを作成するphpスクリプトを作成します。

mysqlからの結果をJSONオブジェクトとしてエンコードし、エコーします。

{
    cities: [
        'City 1',
        'City 2',
        ...
    ]
}

php関数：json_encode（）

次に、次のような操作を行うことができます。

$(function(){
    $('#select-state').on("change", function(){
        var state = $(this).val();
        if(state!=0) {
            $.get('your/path/to/cities/script.php?state='+state,function(data){
                if(data.cities) {
                    $('#select-city').empty(); //remove old entries first
                    for (var city in data.cities) {
                        $option = $('<option>').val(city);
                        $('#select-city').append($option);
                    }
                } 
            });
        }
    });
});
于 2012-12-19T13:23:20.547 に答える
0

3 つの簡単なポイント:

  1. mysql は安全ではありません (代わりに PDO または mysqli を使用する必要があります)
  2. スタイルはインラインではなく CSS で指定する必要があります
  3. ユーザーエクスペリエンスがより速く感じるように、非同期リクエストを使用することをお勧めします

上記の 3 つのポイントはすべて、フレームワークを使用して簡単に達成できることに注意してください (少なくともクライアント側では、CakePHP や Zend などですが、UI インタラクション用に Knockout.js などの Javascript を探すこともできます)。

于 2012-12-19T13:14:49.160 に答える