同社の州、地方自治体、郡のデータは非常にひどいです。これは、EHRシステムからIDを生成するために使用されます。たとえば、福建省はID 01211014AOP145に対応しており、市はIDにも対応しており、地区と郡はそれを無視します。それから私はオンラインでたくさんのリソースプラグインを見つけました。感情は適用できなかったので、自分で書くことにしました。なぜなら、どのフォーマット、スタイル、カラーマッチングの半分のバケツのインターフェイスを作る方法がわからないからです。私はJD.com、Amazon、Taobao、Dangdangなどの人々を静かに検索し、州、都市、地区がどのように行われたかについて検索しました。写真は次のとおりです。
最後に、それを次の図に組み合わせました。
あまりナンセンスなしでソースコードについて話しましょう：
<style type = "text/css"> #divprocity {position：absolute;幅：350px; Max-Height：220px;高さ：自動;表示：なし;ボーダー：1pxソリッド＃D3D3D3; z-index：100;オーバーフロー：自動; Overflow-X：非表示; } .headmenu {height：34px;背景：＃f6f6f6;マージン：0;パディング：0; } .headmenu li {float：left;テキストアライグ：センター;幅：60px;高さ：32px;リストスタイル：なし;背景：＃f6f6f6;ラインハイト：32px;フォントサイズ：13px;カーソル：ポインター; } .headmenu li.lidefault {background：＃f60;色：#fff;マージン：0;パディング：0; } .lidiv1、.lidiv2 {height：auto; Min-Height：30px;ボーダートップ：2.5pxソリッド＃F60;マージントップ：-2px; } .lidiv3 {height：auto; Min-Height：30px; Max-Height：200px;ボーダートップ：2pxソリッド＃f60;マージントップ：-2px; } .lidiv2、.lidiv3 {display：none; } .lidiv1 ul、.lidiv2 ul {padding：2px;マージン：0;クリア：両方; } .lidiv3 ul {padding：2px;マージン：0;クリア：両方; } .lidiv1 ul li、.lidiv2 ul li {float：left;フォントサイズ：14px;幅：60px;ラインハイト：180％;リストスタイル：なし;色：＃252525;マージン：0 4px;カーソル：ポインター;テキストアライグ：センター; } .lidiv3 ul li {float：left;フォントサイズ：13px;ラインハイト：150％;色：＃252525;マージン：1px 3px;リストスタイル：なし;カーソル：ポインター;テキストアライグ：センター; } .lidiv1 ul li：hover、.lidiv2 ul li：hover、.lidiv3 ul li：hover {color：＃8b51cb;カーソル：ポインター;テキスト装置：なし;パディング：0;背景：#ccc; } .btn_img1 {width：20px;垂直アライイン：中央;マージン左：-31px;国境：なし;アウトライン：なし;高さ：10px;カーソル：ポインター;背景：url（image/img_1.png）繰り返しセンターセンター。 z-index：10; } .btn_img2 {margin-left：-31px;マージンボトム：2px;幅：20px;高さ：10px;国境：なし;アウトライン：なし;垂直アライイン：中央;カーソル：ポインター;背景：url（image/img_2.png）繰り返しセンターセンター。 z-index：10; } </style>ページレイアウト：
<head> <title>地方および市の連携のスケーラビリティ</title> <script = "text/javascript" src = "scrips/jquery-1.9.1.min.js"> </script> </head> <body> <ラベル>選択Value = "2" /> foreign <br /> <br /> <label>クエリ州および市のリンケージ：< /label> <入力タイプ= "テキスト" id = "txt_procity" oneyup = "getoutcounty（）" readonly = "readonly" runat = "server" /> <入力タイプ= "id =" />> <br/> <label>ショー場所：</label> <br/> <div id = "divprocity"> <ul> <li> une </li> <li> city </li> [html] view </li> </li> </ul> <div> <ul> <li> fuzhou fuzhou </li> <li> <li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> <li> Fuzhou Fuzhou </li> Fuzhou </li> <li> Fujian </li> <li> anhui </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </ <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> style = "text-align：center; color：＃f60"> <strong>最初に州を選択してください！ </strong> </p> </div>
スクリプト：
<script type = "text/javascript"> $（document）.ready（function（）{$（ '＃divprocity ul.headmenu li'）。click（function（）{var index = $（this）.index（）; //海外の無効なif（index == 2）{return false;} $（ "lidefault"）。 $（this）.val（）; //は、州と都市の価値を空にし、弾丸層を閉じ、入力ボックスを編集できるかどうかを判断します。 $（ '＃btnimg'）。 "Readonly"）; var txt = $（ "input [id*= txt_procity]"）; if（txt.val（）。trim（）== ""）{return false; } var height = txt.height（）; var x = txt.offset（）。top; var y = txt.offset（）。左; $（ '＃divprocity'）。css（{display： "block"、left：y + "px"、top：x + height + 8 + "px"}）; $（ '＃divprocity ul.headmenu li'）。eq（2）.show（）。css（ "width"、 "70px"）。addclass（ "lidefault"）。 $（ '＃divprocity'）。 $（ '＃btnimg'）。attr（ "class"、 "btn_img2"）; $（ '＃btnimg'）。attr（ "name"、 "img2"）; //スイッチイメージにタグを付けます$（'。Lidiv3 '）。html（' '）; $（'。Lidiv3 '）。html（ss）; } //家庭内および海外の右ボタンをクリックして、function changeimg（）{var _selectvalue = $（ "input：checked [name $ = radio1]"）。val（）; if（_SelectValue == "" || _SelectValue == undefined）{alert（ "最初に海外に行くかどうかを選択してください！"）; falseを返します。 } var txt = $（ "input [id*= txt_procity]"）; var height = txt.height（）; var x = txt.offset（）。top; var y = txt.offset（）。左; var name = $（ '＃btnimg'）。attr（ "name"）; if（name == "img1"）{$（ '＃btnimg'）。attr（ "class"、 "btn_img2"）; $（ '＃btnimg'）。attr（ "name"、 "img2"）; $（ '＃divprocity'）。css（{display： "block"、left：y + "px"、top：x + height + 8 + "px"}）; // 1つの国内および2つの外国のコントロールパネルメニュー項目IF（_SELECTVALUE == 1）{$（ '＃DivProcity UL.HeadMenu li'）。eq（2）.hide（）.hide（）。show（）。show（）; $（ '＃divprocity'）。 } else {$（ '＃divprocity ul.headmenu li'）。eq（2）。show（）。css（ "width"、 "70px"）。addclass（ "lidefault"）。 $（ '＃divprocity'）。 }} else {$（ '＃btnimg'）。attr（ "class"、 "btn_img1"）; $（ '＃btnimg'）。attr（ "name"、 "img1"）; $（ '＃divprocity'）。css（ "display"、 "none"）; }} </script>ロジックは、最初に国内または外国人を選択することです。三角形は絵で、H5キャンバスで描かれていません。インターネットにはそのような写真がたくさんあります。
1.入力タイプボタンを画像コンテナとして使用しますが、IMGでそれを出すことさえできません（たぶん私は水をやります）。入力にはデフォルトのスタイルボタンがあります。私のようにアウトラインを書かないでください
2。プロセス指向の方法で書き込み、三角形を押してすべての情報をロードし、画像を切り替えて、画像をクリックして閉じます。その中のいくつかのロジックは、自由に拡張することです。外国のコードが必要ない場合は、外国のコードを削除し、同様の州や都市を追加して拡大してください。
3。たとえば、データの動的荷重は、州の対応するDivクラス名はlidiv1であり、そのボックス構造は
<div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $（ '。lidiv3'）。html（ ''）;
動的なデータSSは、AJAXを介して取得し、バックグラウンドトラバーサルを介して通過できます。
var ss = <ul> <li id = "01211014aop145" onclick = "getli（this）">福建省</li> </ul>
たとえば、以下は.NETの書き込み方法（それを低く記述した場合は気にしないでください）で、それをフロントエンドのAJAXに渡して返された値を受け取り、$（ '。Lidiv3'）。動的データを取得します
if（ds！= null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0）{strbuild.append（ "<table id =/" tableshow/"classtable/" cellspacing = '0'> "）; //STRBUILD.APPENDFORMAT("<tr> <div class =/"dialogtitle1/"> " + title3 +" </div> <tr> "）; foreach（ds.tables [0] .rows）{strbuild.append（ "<tr id = '" + dr ["value"] + "' onmouseover =/" onmouseout = '＃faebd7'/"onmouseout =/" this.bgcolor = '/"/" onclick =/"/" strbuild.appendformat（ "<td> {0} </td>"、dr ["name"]。toString（））; strbuild.append（ "</tr>"）; } strbuild.append（ "</table>"）; }データを取得するには、福建省をクリックして一般的なクリックイベントを書きます。
フロントエンドに書いてください
関数getli（obj）{var id = $（obj）.attr（ "id"）; var text = $（obj）.text（）; //都市のデータを取得するために州IDを介してAjaxを書くことができます}その後、州のテキストIDが取得され、Cityイベントを通じて市のデータを取得できます。同じロードされたIDとテキスト。入力ボックスの上部へのテキストスプライシングは最終結果です（これはまだ書かれていません。非常に簡単です。怠zyな癌攻撃があるときに書きたくありません）。ちなみに、上記のテキストは読み取り専用に設定されています。読み取り専用になると、ReadonlyとDisabledの違いについて話さなければなりません。 Readonlyは、入力ボックスと複数のテキスト入力ボックスに対してのみ有効であり、テキストスタイルは変更されません。すべての要素で基本的な試験を無効にしましたが、その互換性に注意してください。 Runat属性は、上記のテキストボックスに設定されており、.NETの背景を容易にしてデータを直接読み取ることができます。