Jquery で実装されました。元のコードは IE のみをサポートしています。私のコードには 3 つのバージョンの実装があります。
最初のものは、IE/firefox をサポートしていますが、Chrome はサポートしていません。興味がある場合は、XML の読み取り部分を AJAX に変更すると、Chrome のサポートが問題なくなります。
2 番目のものは Json データ形式を使用して構築されており、改善するための 2 回目の試みです
3 番目のものは、データが JS ファイルに分割されていることを除いて、実際には 2 番目のものと同じです。コードには、ページが直接呼び出す場合にデータベースを呼び出して、Json の州と市のデータを生成します。 ASP ファイルの場合、速度は非常に遅くなります。JS ファイルの生成後に直接呼び出す方がはるかに高速であり、通常、データのこの部分は変更されません。
追加のプラグインの例を追加しました。実際には、これはプラグインではなく、単なる関数です。柔軟性を考慮して、プラグインとして記述してみませんか。
select を div、table、td などのページ要素に限定するのではなく、ページ上のどこにでも配置できるようにします。
パラメータは次のようになります。s1/s2/s3は選択IDを構成します。v1/v2/v3はデフォルト値です。設定したくない場合は、nullに設定するか、設定しないでください。それを直接。
パラメータの設定は以下の通りです。selectの3つのIDとデフォルト値を設定するだけです。デフォルト値がない場合はnullを記入してください
var defaults = { s1:'Select1', s2:'Select2', s3:'Select3', v1:null, v2:null, v3:null };
ディレクトリ内のphpファイルは次のとおりです。使用するサーバー データの生成されたデモ。
データ形式の定義は次のようになります:
var threeSelectData={ "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}}, "beijing":{val:"01",items:{ "bj-01":{val:"0101",items:{ "bj-01-01":"010101" }}, "bj-02":{val:"0102",items:{ "bj-02-01":"010201", "bj-02-02":"010202" }} }}, "shanxi":{val:"02",items:{}}, "guangzhou":{val:"02",items:{}} };
コード例: