PHP+Mysql+jQueryのクエリとリストボックスの選択操作例解説、jqueryサンプル解説_PHPチュートリアル

PHP+Mysql+jQueryのクエリとリストボックスの選択操作例の説明、jqueryの例の説明

この記事では、Ajaxを介してmysqlデータをクエリし、返されたデータを待機リストに表示し、最後にオプションを追加する方法を説明します選択 選択した領域に対して、多くのバックグラウンド管理システムで使用できます。この記事のリスト ボックスの操作は、jquery プラグインに依存しています。

HTML

説明すると、HTML コンテンツはフォームであり、クエリ入力ボックス、リスト ボックス、および関連ボタンが含まれています。

MYSQL データテーブル構造

テーブル t_mult は、名前と携帯電話番号フィールドを含む連絡先情報テーブルです。

CSS

この例では、Multiselect プラグインに必要なスタイル ファイルのみが読み込まれています。他の CSS は自分でデザインできます。
JAVASCRIPT
まず、この例に必要な 2 つの js ファイルを参照する必要があります。

次に、Multiselect プラグインを呼び出しましょう。

次に、Ajax クエリ データを実行するための検索ボタンを作成しましょう。

説明、検索ボタンをクリックすると、Ajax 非同期操作が実行され、取得した検索ボックスの入力値が POST モードでバックグラウンド プログラムの action.php に渡されて処理され、別の結果が返されます。 JAVASCRIPT が 1 を返す場合、HTML ページに「レコードなし」というプロンプトが表示されます。それ以外の場合は、結果が左側のリスト ボックス (選択対象) に出力されます。 注意ここが重要なポイントですなぜリストボックスがXHTMLのliOptionではなく、liOptionms2side__sxに変更されたのでしょうか？ これは、Multiselect プラグインから始まります。Multiselect プラグインは、実際には、関連する操作のためにリスト ボックスを左右 2 つのリスト ボックスに置き換えます。プラグイン コードを見ると、見つけるのは難しくありません。左側の名前は liOptionms2side__sx、右側のリスト ボックスの名前は liOptionms2side__sx です (選択された) リスト ボックスの名前は liOptionms2side__dx です。これは後で使用します。

PHP

まずはaction.phpの処理を見てみましょう。
最初のステップはデータベースに接続することです。

2 番目のステップは、データを読み取って出力することです。 検索ボックスから値を検出して、さまざまな SQL ステートメントを構築し、出力用のデータを返します。コードは次のとおりです。
リーリー

リーリー

クエリと操作の例は実装されましたが、選択された領域にアイテムを追加する際に、追加されたアイテムが再度追加できないことをどのように判断して制御するかは、皆さんの考えに委ねられています。試してみてください。