Five-level address linkage effect (js) in the project
Last Update:2016-05-31
Source: Internet
Author: User
<span id="Label3"></p><p><p>When I first started, I wrote a SQL statement, but I wrote 5 functions to link the address. Later consulted the former section of the master, with JS to write an address linkage.</p></p><p><p>I'm using the Easyui frame!</p></p><pre><span style="color: #000000;"><span style="color: #000000;">Address linkage part HTML code! </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">TR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">TD</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">colspan</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "4"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "address_box1"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">province:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "easyui-combobox"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "codename"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "codename"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:120px;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">city:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "easyui-combobox"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_nameshi"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_nameshi"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:120px;"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">district/county:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "easyui-combobox"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_namequ"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_namequ"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:120px;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">street:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "easyui-combobox"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_namebut"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_namebut"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:150px;"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #000000;"><span style="color: #000000;">community:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "easyui-combobox"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_nameshequ"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "code_nameshequ"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:150px;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">name</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "addressid"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "addressid"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "display:none"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">TD</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">TR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>Because mine is after adding a piece of data, to refresh the entire page.</p></p><p><p></p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Addressbox =<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;"> () { </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Self =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. Selectboxs = ["codename", "code_nameshi", "code_namequ", "code_namebut", "code_nameshequ"<span style="color: #000000;"><span style="color: #000000;">]; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Len =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. selectboxs.length, i, obj; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(i = 0; I < len; + +)<span style="color: #000000;"><span style="color: #000000;">I) {obj</span></span>= $("#" +<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. selectboxs[i]); </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(i<len-1<span style="color: #000000;"><span style="color: #000000;">{//here The length-1, is because I want to get the last data, is the last address of the ID value, the previous address I need to get is their code_value. Obj.combobox ({valuefield:</span></span>' Code_value '<span style="color: #000000;"><span style="color: #000000;">, TextField:</span></span>' Name '<span style="color: #000000;"><span style="color: #000000;">, OnChange: (</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(index) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(newvalue, OldValue) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(newvalue && newvalue.length > 0<span style="color: #000000;"><span style="color: #000000;">) {self. Clear (index</span></span>+ 1<span style="color: #000000;"><span style="color: #000000;">); Self. Load (index</span></span>+ 1<span style="color: #000000;"><span style="color: #000000;">, newvalue); } }; }) (i)}); }</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;">{obj.combobox ({valuefield:</span></span>' ID '<span style="color: #000000;"><span style="color: #000000;">, TextField:</span></span>' Name '<span style="color: #000000;"><span style="color: #000000;"> }); } } }; Addressbox.prototype</span></span>=<span style="color: #000000;"><span style="color: #000000;">{Clear:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(index) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span><span style="color: #000000;"><span style="color: #000000;">i, ob; Index</span></span>= Index | | 0<span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(i = index; I <<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. selectboxs.length; ++<span style="color: #000000;"><span style="color: #000000;">I) {ob</span></span>= $("#" +<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. selectboxs[i]); Ob.combobox (</span></span>"clear"<span style="color: #000000;"><span style="color: #000000;">); Clear Data Ob.combobox (</span></span>"loaddata"<span style="color: #000000;"><span style="color: #000000;">, []);//load data}}, load:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(index, pid, Initvalue) {index</span></span>= Index | | 0<span style="color: #000000;"><span style="color: #000000;"> ; PID</span></span>= PID | | "156"<span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>v =<span style="color: #000000;"><span style="color: #000000;">parseint (initvalue); </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span><span style="color: #000000;"><span style="color: #000000;">(pid) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Self =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">; $.ajax ({url:</span></span>'/yxt-admin/admin/address/' + pid + '/name '<span style="color: #000000;"><span style="color: #000000;">,//the SQL statement that queries the address success:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(back) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span><span style="color: #000000;"><span style="color: #000000;">(back.data) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>rows = back.data.rows, OB = $ ("#" +<span style="color: #000000;"><span style="color: #000000;">self.selectboxs[index]); Ob.combobox (</span></span>"loaddata"<span style="color: #000000;"><span style="color: #000000;">, rows); </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(initvalue!==<span style="color: #000000;"><span style="color: #000000;">Undefined) {ob.combobox (</span></span>"setValue"<span style="color: #000000;"><span style="color: #000000;">, v); }}</span> self</span>=<span style="color: #0000ff;"><span style="color: #0000ff;">NULL</span></span><span style="color: #000000;"><span style="color: #000000;">; PID</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">NULL</span></span><span style="color: #000000;"><span style="color: #000000;">; V</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">NULL</span></span><span style="color: #000000;"><span style="color: #000000;">; } }); }}, ReSet:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(){ </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. Clear (); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">obj = [];</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(window.parent &&<span style="color: #000000;"><span style="color: #000000;">Window.parent.__hospital_adressdata) { </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Adressdata = window.parent.__hospital_adressdata, len =<span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. selectboxs.length, i; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(i = 0; I < len; + +)<span style="color: #000000;"><span style="color: #000000;">I) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span>. Load (i, adressdata[i-1<span style="color: #000000;"><span style="color: #000000;">], adressdata[i]); } }</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;">{ </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> this</span><span style="color: #000000;"><span style="color: #000000;">. Load (); } } }; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Addressbox =<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span>Addressbox ();</pre><p><p>Calling a function requires only this step:</p></p><p><p>Address Selection<br>Addressbox. ReSet ();</p></p><p><p></p></p><p><p>of course, after I've added the data, I want to add a piece of data to the same address, so I'm going to keep the address of the previous piece of data Clean. But I have refreshed the entire page, so is definitely cleared, so you need to set Window.parent.</p></p><p><p>Add the data where it was added</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span><span style="color: #000000;"><span style="color: #000000;">(window.parent) {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span><span style="color: #000000;"><span style="color: #000000;">(window.parent.__hospital_adressdata) {window.par Ent.__hospital_adressdata.splice (</span></span>0<span style="color: #000000;"><span style="color: #000000;">, window.parent.__hospital_adressdata.length); }</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;">{window.parent.__hospital_adressdata</span></span>=<span style="color: #000000;"><span style="color: #000000;"> []; } </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Selectboxs = ["codename", "code_nameshi", "code_namequ", "code_namebut", "code_nameshequ"<span style="color: #000000;"><span style="color: #000000;">], Len</span></span>=<span style="color: #000000;"><span style="color: #000000;">selectboxs.length,i; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(i = 0; I < len; + +)<span style="color: #000000;"><span style="color: #000000;">I) {window.parent.__hospital_adressdata.push ($ (</span></span>' # ' + selectboxs[i]). combobox (' GetValue '<span style="color: #000000;"><span style="color: #000000;">)); } }</span></span></pre><p><p></p></p><p><p>Five-level address linkage effect (js) in the project</p></p></span>
