0

ある「選択」要素を変更すると、別の「選択」要素の値が変更されるフォームに取り組んでいます。両方の要素の値は、MSSQL データベースから取得されます。これを達成できるコードを実装する最良の方法は何ですか?

それを行うには2つの方法が考えられます。

  1. テーブルを JavaScript 変数に格納し、最初の要素の onchange イベントで 2 番目の要素を変更します。

  2. ページに GET リクエストを送信して再読み込みし、PHP を使用して 2 番目の要素を変更します。

PHP 側から JavaScript 側にデータベースを格納するのは、ハックのようで面倒に思えるので、最初の方法は好きではありません。2 番目の方法も好きではありません。ページをリロードするとユーザー エクスペリエンスが損なわれ、もう一度下にスクロールしなければならなくなるからです。

4

4 に答える 4

1

AJAXを使用してデータを取り込み、2 番目の select 要素に入力する必要があります。簡単に言うと、AJAX は舞台裏で発生する別のページ リクエストにすぎません。これを使用して、単純な HTML ページまたは部分を読み込んで DOM 要素に表示したり、構造化データを動的に取得したりできます。

これを行う最善の方法は、JSON (JavaScript Object Notation) を使用することです。この場合、Javascript を使用して PHP ページへの AJAX 呼び出しを行い、その PHP ページはクエリ文字列で最初の選択要素の値を表す引数を取ります。これにより、MSSQL データベースを呼び出して、2 番目の選択に対応するすべてのオプションを取得し、それらをエコー出力します。次に、AJAX 要求を作成するために使用する Javascript は、応答を解析し、それを JavaScript オブジェクト リテラルとして解釈できるため、結果をループして、必要な処理を行うことができます。

以下に例を示します (AJAX を非常に簡単にするため、jQuery を使用しています)。

フォームページの上部:

$(document).ready(function() {
    $('#select1').change(function() {
        var select1val = $(this).val();
        $.getJSON('/path/to/response.php', 'select1=' + select1val, function(response) {
             $('#select2').empty();
             if(response) {

                for(var option in response) {
                    $('<option/>').val(option.value).html(option.label).appendTo($('#select2'));
                }
             }
        });
     });
});

そして、response.php ページは次のようになります。

<?php
$select1 = $_GET['select1'];
// Do validation here, to make sure it's a legitimate value for select1. Never trust the
// user input directly.

// Replace this with whatever code you use to make DB queries.
$options = $mydb->query("SELECT value,label FROM select2_options WHERE select1_value=?", $select1);

echo json_encode($options);
于 2013-06-20T21:52:41.840 に答える
1

Ajaxページをリロードしたくない場合に使用します。AJAXの詳細を読む 

$('#select1').change(function() {
    var value = $(this).val();
    var dataString = 'id='+ value;

    if(value != '') 
    {
        $.ajax({
               type: "POST",
               url: "fetchOptionsForSelect2.php",
               data: dataString,
               success: function(html) {
                     $('#select2').html(html);
               }
        });
    } 
    else 
    {
        //reset select2
        $('#select2').html("<option value=''>Select value from select1 first</option>");
    }
});
于 2013-06-20T21:49:05.777 に答える
0

http://www.appelsiini.net/projects/chainedを使用

<script src="jquery.chained.min.js"></script>

<select id="mark" name="mark">
    <?php
         foreach($select1_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
    </select>
    <select id="series" name="series">
    <?php
        foreach($select2_opt as $opt)
        {
            echo "<option value=$opt>$opt</option>";
        }
    ?>
</select>
于 2013-06-20T22:02:59.407 に答える