<p><code></p> <p>还是那是老话,好记性不如烂笔头<br /> 会的东西,不经常动手做,也就忘记了,下面是一个jquery ajax select 的联动</p> <p>实用小例:</p> <p>ajaxTest.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;><br /> <html ot; /><br /> <title> jquery + ajax + php + select </title><br /> </head> </p> <p><script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery.min.js&quot;></script> </p> <p><script language=&quot;javascript&quot;> $(document).ready(function(){ $(&quot;#bTrade&quot;).change(function() { //jquery 中change()函数 $(&quot;#quote&quot;).load(&quot;ajaxTest.php?name=&quot;+$(&quot;#bTrade&quot;).val()); //jqueryajax中load()函数 }); }); </script></p> <p><select name=&quot;bTrade&quot; id=&quot;bTrade&quot;><option value=&quot;a&quot;>a</option><option value=&quot;b&quot;>b</option></select> </p> <div id=&quot;quote&quot;> </div> <p><body><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD X<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">>"http://www.w3.org/1999/xhtml"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span> jquery + ajax + php + select <span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://code.jquery.com/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">language</span>=<span class="hljs-string">"javascript"</span>&gt;</span><span class="javascript"> $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">"#bTrade"</span>).change(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//jquery 中change()函数 </span> $(<span class="hljs-string">"#quote"</span>).load(<span class="hljs-string">"ajaxTest.php?name="</span>+$(<span class="hljs-string">"#bTrade"</span>).val()); <span class="hljs-comment">//jqueryajax中load()函数 </span> }); }); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"bTrade"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bTrade"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"a"</span>&gt;</span>a<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"b"</span>&gt;</span>b<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quote"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>ajaxTest.php</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<?php $array = array( 'a'=>array('a1','a2','a3','a4'),<br /> 'b'=>array('b1','b2','b3','b4'),<br /> );<br /> $name=$_GET['name'];</p> <p> $str='<select name=&quot;server&quot; >';<br /> foreach($array[$name] as $key=>$value)<br /> {<br /> $str.='<option value=&quot;'.$key.'&quot;>'.$value.'</option>';<br /> }<br /> $str.='</select>';<br /> echo $str;<br /> ?><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="php"><span class="hljs-meta">&lt;?php</span> $array = <span class="hljs-keyword">array</span>( <span class="hljs-string">'a'</span>=&gt;<span class="hljs-keyword">array</span>(<span class="hljs-string">'a1'</span>,<span class="hljs-string">'a2'</span>,<span class="hljs-string">'a3'</span>,<span class="hljs-string">'a4'</span>), <span class="hljs-string">'b'</span>=&gt;<span class="hljs-keyword">array</span>(<span class="hljs-string">'b1'</span>,<span class="hljs-string">'b2'</span>,<span class="hljs-string">'b3'</span>,<span class="hljs-string">'b4'</span>), ); $name=$_GET[<span class="hljs-string">'name'</span>]; $str=<span class="hljs-string">'&lt;select name="server" &gt;'</span>; <span class="hljs-keyword">foreach</span>($array[$name] <span class="hljs-keyword">as</span> $key=&gt;$value) { $str.=<span class="hljs-string">'&lt;option value="'</span>.$key.<span class="hljs-string">'"&gt;'</span>.$value.<span class="hljs-string">'&lt;/option&gt;'</span>; } $str.=<span class="hljs-string">'&lt;/select&gt;'</span>; <span class="hljs-keyword">echo</span> $str; <span class="hljs-meta">?&gt;</span></span> </code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/jquery/jquery_41181.html