最近的一个项目中用到了下拉框联动显示数据的功能,索性利用Ajax来实现。实现的方法有很多,网上也有很多其他的方法,web开发中会经常用到,记录下来,分享给新手。
页面中的两个下拉列表框:
<tr>
<td style="width: 130px">
所在学院:</td>
<td style="width: 100px">
<select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)">
<option value="0">
--请选择所在学院学院--
</option>
</select></td>
</tr>
<tr>
<td style="width: 130px">
所在专业:</td>
<td style="width: 100px">
<select id="specialty" style="width: 200px" runat="server" onchange="SaveSpecical(this.value)">
<option value="0">
--请选择所在专业--
</option>
</select></td>
</tr>
JS脚本代码:

Code
<script type=<font color="#800000">"text/javascript"</font>>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/None.gif" align="top"><font color="#0000FF">var</font> http_request = <font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/None.gif" align="top"><font color="#0000FF">function</font> send_request(method,url,content,responseType,callback)<font color="#008000">//定义发送请求的函数 </font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedBlockStart.gif" name="CodeFunction2223_expand_img" id="CodeFunction2223_expand_img" align="top" onclick="document.getElementById('CodeFunction2223_shrink_img').style.display='inline';document.getElementById('CodeFunction2223_expand_img').style.display='none';document.getElementById('CodeFunction2223_expand_text').style.display='none';document.getElementById('CodeFunction2223_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedBlock.gif" name="CodeFunction2223_shrink_img" id="CodeFunction2223_shrink_img" align="top" onclick="document.getElementById('CodeFunction2223_shrink_img').style.display='none';document.getElementById('CodeFunction2223_expand_img').style.display='inline';document.getElementById('CodeFunction2223_expand_text').style.display='inline';document.getElementById('CodeFunction2223_shrink_text').style.display='none';" style="display:none;"><span id="CodeFunction2223_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction2223_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request=<font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(window.XMLHttpRequest)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction5893_expand_img" id="CodeFunction5893_expand_img" align="top" onclick="document.getElementById('CodeFunction5893_shrink_img').style.display='inline';document.getElementById('CodeFunction5893_expand_img').style.display='none';document.getElementById('CodeFunction5893_expand_text').style.display='none';document.getElementById('CodeFunction5893_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction5893_shrink_img" id="CodeFunction5893_shrink_img" align="top" onclick="document.getElementById('CodeFunction5893_shrink_img').style.display='none';document.getElementById('CodeFunction5893_expand_img').style.display='inline';document.getElementById('CodeFunction5893_expand_text').style.display='inline';document.getElementById('CodeFunction5893_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction5893_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction5893_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request=<font color="#0000FF">new</font> XMLHttpRequest();
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(http_request.overrideMimeType)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction6570_expand_img" id="CodeFunction6570_expand_img" align="top" onclick="document.getElementById('CodeFunction6570_shrink_img').style.display='inline';document.getElementById('CodeFunction6570_expand_img').style.display='none';document.getElementById('CodeFunction6570_expand_text').style.display='none';document.getElementById('CodeFunction6570_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction6570_shrink_img" id="CodeFunction6570_shrink_img" align="top" onclick="document.getElementById('CodeFunction6570_shrink_img').style.display='none';document.getElementById('CodeFunction6570_expand_img').style.display='inline';document.getElementById('CodeFunction6570_expand_text').style.display='inline';document.getElementById('CodeFunction6570_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction6570_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction6570_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.overrideMimeType(<font color="#800000">"text/xml"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">else</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction1674_expand_img" id="CodeFunction1674_expand_img" align="top" onclick="document.getElementById('CodeFunction1674_shrink_img').style.display='inline';document.getElementById('CodeFunction1674_expand_img').style.display='none';document.getElementById('CodeFunction1674_expand_text').style.display='none';document.getElementById('CodeFunction1674_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction1674_shrink_img" id="CodeFunction1674_shrink_img" align="top" onclick="document.getElementById('CodeFunction1674_shrink_img').style.display='none';document.getElementById('CodeFunction1674_expand_img').style.display='inline';document.getElementById('CodeFunction1674_expand_text').style.display='inline';document.getElementById('CodeFunction1674_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction1674_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction1674_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">try</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction6719_expand_img" id="CodeFunction6719_expand_img" align="top" onclick="document.getElementById('CodeFunction6719_shrink_img').style.display='inline';document.getElementById('CodeFunction6719_expand_img').style.display='none';document.getElementById('CodeFunction6719_expand_text').style.display='none';document.getElementById('CodeFunction6719_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction6719_shrink_img" id="CodeFunction6719_shrink_img" align="top" onclick="document.getElementById('CodeFunction6719_shrink_img').style.display='none';document.getElementById('CodeFunction6719_expand_img').style.display='inline';document.getElementById('CodeFunction6719_expand_text').style.display='inline';document.getElementById('CodeFunction6719_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction6719_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction6719_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request=<font color="#0000FF">new</font> ActiveXObject(<font color="#800000">"Msxml2.XMLHTTP"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">catch</font>(e)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction4352_expand_img" id="CodeFunction4352_expand_img" align="top" onclick="document.getElementById('CodeFunction4352_shrink_img').style.display='inline';document.getElementById('CodeFunction4352_expand_img').style.display='none';document.getElementById('CodeFunction4352_expand_text').style.display='none';document.getElementById('CodeFunction4352_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction4352_shrink_img" id="CodeFunction4352_shrink_img" align="top" onclick="document.getElementById('CodeFunction4352_shrink_img').style.display='none';document.getElementById('CodeFunction4352_expand_img').style.display='inline';document.getElementById('CodeFunction4352_expand_text').style.display='inline';document.getElementById('CodeFunction4352_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction4352_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction4352_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">try</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction1868_expand_img" id="CodeFunction1868_expand_img" align="top" onclick="document.getElementById('CodeFunction1868_shrink_img').style.display='inline';document.getElementById('CodeFunction1868_expand_img').style.display='none';document.getElementById('CodeFunction1868_expand_text').style.display='none';document.getElementById('CodeFunction1868_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction1868_shrink_img" id="CodeFunction1868_shrink_img" align="top" onclick="document.getElementById('CodeFunction1868_shrink_img').style.display='none';document.getElementById('CodeFunction1868_expand_img').style.display='inline';document.getElementById('CodeFunction1868_expand_text').style.display='inline';document.getElementById('CodeFunction1868_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction1868_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction1868_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request=<font color="#0000FF">new</font> ActiveXObject(<font color="#800000">"Microsoft.XMLHTTP"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">catch</font>(e)
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <span id="CodeFunction9645_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction9645_expand_text" style="display:inline;">{}</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(!http_request)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction2908_expand_img" id="CodeFunction2908_expand_img" align="top" onclick="document.getElementById('CodeFunction2908_shrink_img').style.display='inline';document.getElementById('CodeFunction2908_expand_img').style.display='none';document.getElementById('CodeFunction2908_expand_text').style.display='none';document.getElementById('CodeFunction2908_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction2908_shrink_img" id="CodeFunction2908_shrink_img" align="top" onclick="document.getElementById('CodeFunction2908_shrink_img').style.display='none';document.getElementById('CodeFunction2908_expand_img').style.display='inline';document.getElementById('CodeFunction2908_expand_text').style.display='inline';document.getElementById('CodeFunction2908_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction2908_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction2908_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> window.alert(<font color="#800000">"创建XMLHttpRequest对象失败"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">return</font> <font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(responseType.toLowerCase()==<font color="#800000">"text"</font>)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction1813_expand_img" id="CodeFunction1813_expand_img" align="top" onclick="document.getElementById('CodeFunction1813_shrink_img').style.display='inline';document.getElementById('CodeFunction1813_expand_img').style.display='none';document.getElementById('CodeFunction1813_expand_text').style.display='none';document.getElementById('CodeFunction1813_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction1813_shrink_img" id="CodeFunction1813_shrink_img" align="top" onclick="document.getElementById('CodeFunction1813_shrink_img').style.display='none';document.getElementById('CodeFunction1813_expand_img').style.display='inline';document.getElementById('CodeFunction1813_expand_text').style.display='inline';document.getElementById('CodeFunction1813_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction1813_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction1813_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.onreadystatechange=callback;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">else</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction9882_expand_img" id="CodeFunction9882_expand_img" align="top" onclick="document.getElementById('CodeFunction9882_shrink_img').style.display='inline';document.getElementById('CodeFunction9882_expand_img').style.display='none';document.getElementById('CodeFunction9882_expand_text').style.display='none';document.getElementById('CodeFunction9882_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction9882_shrink_img" id="CodeFunction9882_shrink_img" align="top" onclick="document.getElementById('CodeFunction9882_shrink_img').style.display='none';document.getElementById('CodeFunction9882_expand_img').style.display='inline';document.getElementById('CodeFunction9882_expand_text').style.display='inline';document.getElementById('CodeFunction9882_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction9882_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction9882_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top">
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> window.alert(<font color="#800000">"ERR"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">return</font> <font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(method.toLowerCase()==<font color="#800000">"get"</font>)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction8627_expand_img" id="CodeFunction8627_expand_img" align="top" onclick="document.getElementById('CodeFunction8627_shrink_img').style.display='inline';document.getElementById('CodeFunction8627_expand_img').style.display='none';document.getElementById('CodeFunction8627_expand_text').style.display='none';document.getElementById('CodeFunction8627_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction8627_shrink_img" id="CodeFunction8627_shrink_img" align="top" onclick="document.getElementById('CodeFunction8627_shrink_img').style.display='none';document.getElementById('CodeFunction8627_expand_img').style.display='inline';document.getElementById('CodeFunction8627_expand_text').style.display='inline';document.getElementById('CodeFunction8627_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction8627_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction8627_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.open(method,url,<font color="#0000FF">true</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">else</font> <font color="#0000FF">if</font>(method.toLowerCase()==<font color="#800000">"post"</font>)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction9139_expand_img" id="CodeFunction9139_expand_img" align="top" onclick="document.getElementById('CodeFunction9139_shrink_img').style.display='inline';document.getElementById('CodeFunction9139_expand_img').style.display='none';document.getElementById('CodeFunction9139_expand_text').style.display='none';document.getElementById('CodeFunction9139_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction9139_shrink_img" id="CodeFunction9139_shrink_img" align="top" onclick="document.getElementById('CodeFunction9139_shrink_img').style.display='none';document.getElementById('CodeFunction9139_expand_img').style.display='inline';document.getElementById('CodeFunction9139_expand_text').style.display='inline';document.getElementById('CodeFunction9139_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction9139_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction9139_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.open(method,url,<font color="#0000FF">true</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.setRequestHeader(<font color="#800000">"Content-Type"</font>,<font color="#800000">"application/x-www-form-urlencoded"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">else</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction8770_expand_img" id="CodeFunction8770_expand_img" align="top" onclick="document.getElementById('CodeFunction8770_shrink_img').style.display='inline';document.getElementById('CodeFunction8770_expand_img').style.display='none';document.getElementById('CodeFunction8770_expand_text').style.display='none';document.getElementById('CodeFunction8770_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction8770_shrink_img" id="CodeFunction8770_shrink_img" align="top" onclick="document.getElementById('CodeFunction8770_shrink_img').style.display='none';document.getElementById('CodeFunction8770_expand_img').style.display='inline';document.getElementById('CodeFunction8770_expand_text').style.display='inline';document.getElementById('CodeFunction8770_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction8770_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction8770_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> window.alert(<font color="#800000">"Err"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">return</font> <font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> http_request.send(content);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top">}</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top">
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"><font color="#0000FF">function</font> changcollege(va)<font color="#008000">//当学院下拉列表发生改变时触发的脚本事件 </font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction1807_expand_img" id="CodeFunction1807_expand_img" align="top" onclick="document.getElementById('CodeFunction1807_shrink_img').style.display='inline';document.getElementById('CodeFunction1807_expand_img').style.display='none';document.getElementById('CodeFunction1807_expand_text').style.display='none';document.getElementById('CodeFunction1807_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction1807_shrink_img" id="CodeFunction1807_shrink_img" align="top" onclick="document.getElementById('CodeFunction1807_shrink_img').style.display='none';document.getElementById('CodeFunction1807_expand_img').style.display='inline';document.getElementById('CodeFunction1807_expand_text').style.display='inline';document.getElementById('CodeFunction1807_shrink_text').style.display='none';" style="display:none;"><span id="CodeFunction1807_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction1807_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(va!='0')
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction1000_expand_img" id="CodeFunction1000_expand_img" align="top" onclick="document.getElementById('CodeFunction1000_shrink_img').style.display='inline';document.getElementById('CodeFunction1000_expand_img').style.display='none';document.getElementById('CodeFunction1000_expand_text').style.display='none';document.getElementById('CodeFunction1000_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction1000_shrink_img" id="CodeFunction1000_shrink_img" align="top" onclick="document.getElementById('CodeFunction1000_shrink_img').style.display='none';document.getElementById('CodeFunction1000_expand_img').style.display='inline';document.getElementById('CodeFunction1000_expand_text').style.display='inline';document.getElementById('CodeFunction1000_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction1000_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction1000_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> speciality = document.getElementById(<font color="#800000">"specialty"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> speciality.disabled=<font color="#0000FF">false</font>;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top">
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> url=<font color="#800000">"Handler.ashx?type=college&id="</font>+va;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> send_request(<font color="#800000">"GET"</font>,url,<font color="#0000FF">null</font>,<font color="#800000">"text"</font>,populateClass3);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top">}</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"><font color="#0000FF">function</font> populateClass3()<font color="#008000">//Ajax执行成功的回调函数 </font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction7148_expand_img" id="CodeFunction7148_expand_img" align="top" onclick="document.getElementById('CodeFunction7148_shrink_img').style.display='inline';document.getElementById('CodeFunction7148_expand_img').style.display='none';document.getElementById('CodeFunction7148_expand_text').style.display='none';document.getElementById('CodeFunction7148_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction7148_shrink_img" id="CodeFunction7148_shrink_img" align="top" onclick="document.getElementById('CodeFunction7148_shrink_img').style.display='none';document.getElementById('CodeFunction7148_expand_img').style.display='inline';document.getElementById('CodeFunction7148_expand_text').style.display='inline';document.getElementById('CodeFunction7148_shrink_text').style.display='none';" style="display:none;"><span id="CodeFunction7148_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction7148_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> f=document.getElementById(<font color="#800000">"specialty"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(http_request.readyState==4)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction6553_expand_img" id="CodeFunction6553_expand_img" align="top" onclick="document.getElementById('CodeFunction6553_shrink_img').style.display='inline';document.getElementById('CodeFunction6553_expand_img').style.display='none';document.getElementById('CodeFunction6553_expand_text').style.display='none';document.getElementById('CodeFunction6553_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction6553_shrink_img" id="CodeFunction6553_shrink_img" align="top" onclick="document.getElementById('CodeFunction6553_shrink_img').style.display='none';document.getElementById('CodeFunction6553_expand_img').style.display='inline';document.getElementById('CodeFunction6553_expand_text').style.display='inline';document.getElementById('CodeFunction6553_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction6553_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction6553_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">if</font>(http_request.status==200)
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction2899_expand_img" id="CodeFunction2899_expand_img" align="top" onclick="document.getElementById('CodeFunction2899_shrink_img').style.display='inline';document.getElementById('CodeFunction2899_expand_img').style.display='none';document.getElementById('CodeFunction2899_expand_text').style.display='none';document.getElementById('CodeFunction2899_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction2899_shrink_img" id="CodeFunction2899_shrink_img" align="top" onclick="document.getElementById('CodeFunction2899_shrink_img').style.display='none';document.getElementById('CodeFunction2899_expand_img').style.display='inline';document.getElementById('CodeFunction2899_expand_text').style.display='inline';document.getElementById('CodeFunction2899_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction2899_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction2899_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> list=http_request.responseText;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> classList=list.split(<font color="#800000">"|"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> f.options.length=1;
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">for</font>(<font color="#0000FF">var</font> i=0;i<classList.length;i++)
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#008000">//将取得的结果添加到下级的列表框中 </font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction2770_expand_img" id="CodeFunction2770_expand_img" align="top" onclick="document.getElementById('CodeFunction2770_shrink_img').style.display='inline';document.getElementById('CodeFunction2770_expand_img').style.display='none';document.getElementById('CodeFunction2770_expand_text').style.display='none';document.getElementById('CodeFunction2770_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction2770_shrink_img" id="CodeFunction2770_shrink_img" align="top" onclick="document.getElementById('CodeFunction2770_shrink_img').style.display='none';document.getElementById('CodeFunction2770_expand_img').style.display='inline';document.getElementById('CodeFunction2770_expand_text').style.display='inline';document.getElementById('CodeFunction2770_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction2770_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction2770_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">var</font> tmp=classList[i].split(<font color="#800000">","</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> f.add(<font color="#0000FF">new</font> Option(tmp[1],tmp[0]));
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> <font color="#0000FF">else</font>
<img src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockStart.gif" name="CodeFunction7045_expand_img" id="CodeFunction7045_expand_img" align="top" onclick="document.getElementById('CodeFunction7045_shrink_img').style.display='inline';document.getElementById('CodeFunction7045_expand_img').style.display='none';document.getElementById('CodeFunction7045_expand_text').style.display='none';document.getElementById('CodeFunction7045_shrink_text').style.display='inline'" style="display:inline;"><IMG src="/editor/editor/plugins/InsertCode/codeimages/ContractedSubBlock.gif" name="CodeFunction7045_shrink_img" id="CodeFunction7045_shrink_img" align="top" onclick="document.getElementById('CodeFunction7045_shrink_img').style.display='none';document.getElementById('CodeFunction7045_expand_img').style.display='inline';document.getElementById('CodeFunction7045_expand_text').style.display='inline';document.getElementById('CodeFunction7045_shrink_text').style.display='none';" style="display:none;"> <span id="CodeFunction7045_shrink_text" style="color: #808080;BORDER: #808080 1px solid; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;display:none;">...</span><span id="CodeFunction7045_expand_text" style="display:inline;">{
<IMG src="/editor/editor/plugins/InsertCode/codeimages/InBlock.gif" align="top"> alert(<font color="#800000">"您所请求的页面有异常。"</font>);
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedSubBlockEnd.gif" align="top"> }</span>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/ExpandedBlockEnd.gif" align="top">}</span>
</script>
<IMG src="/editor/editor/plugins/InsertCode/codeimages/None.gif" align="top">
我们将http请求发送给服务端的Handler.ashx进行处理。

Code
public class Handler : IHttpHandler

...{
public void ProcessRequest(HttpContext context)

...{
string type = context.Request.QueryString["type"];
if (type.Equals("college"))

...{
string id = context.Request.QueryString["id"];
context.Response.ContentType = "text/plain";
context.Response.Write(getSpecialty(id));//这个是从数据库中根据传来省的id 查询出来的。学院的名字和主键,主键以便去查专业的名字
}
}
public string getSpecialty(string college)

...{
DataSet ds = GetInformation.GetSpecialtyInfo(college);
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

...{
if (i == ds.Tables[0].Rows.Count - 1)

...{
str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString();
}
else

...{
str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString() + "|";
}
}
return str.Trim();
}

public bool IsReusable ...{

get ...{
return false;
}
}
}
根据学院的编号获得相应的专业,并将专业的名称用“|”分割组合成字符串返回给客户端,客户端脚本拆分字符串添加到下拉框中。

这里只是二级的联动显示,三级联动数据的现实原理是一样的。