2. 程式人生 > >ajax實現三級聯動下拉選單

ajax實現三級聯動下拉選單

阿新 • • 發佈：2019-02-01
  老師最近給了個小任務，排課系統中，將老師的的課表顯示出來，要用到下拉選單三級聯動，在網上找了很多資料，但是看別人的程式碼太吃力了，只要思路清晰，何不自己動手敲一個出來。這裡別看我的程式碼，看思路就好了。 要求：選擇第一個下拉選單的某個選項之後，第二個下拉選單的選項要隨第一個的選項變化而變化，同理，第三個下拉選單的選項要隨第二個下拉選單選項的變化而變化，三個選單的選項都是從資料庫中讀取。      某個年級某個科目的某個教師 <body>     <div>         <select id="class" name="class" onchange="showcourse(this.value)">
        <option value="" selected="selected">選擇年級</option>             <?php  showclass(); ?>         </select>         <select id="course" name="course"onchange="showteacher(this.value)">             <option value="" selected="selected">選擇科目</option>         </select>
        <select id="teacher" name="teacher" onchange="showtable(this.value  )">             <option value="" selected="selected">選擇教師</option>         </select>     </div>     <div id="showcourse"></div> </body> 一、 主思路：1、先弄好前端顯示頁面。               2、年級下拉選單通過php檔案直接從資料庫中讀取所有的年級               3、選中年級選項的時候，觸發事件，showcourse（）函式通過年級下拉選單選項確定科目下拉選單的選項               4、選中科目選項的時候，觸發事件，showteacher（）函式通過科目下拉選單選項確定教師下拉選單的選項               5、選中教師選項的時候，出發時間，showtable（）函式通過教師下拉選單選項輸出該教師的課程表 二、        上面的主思路中，第2步很容易解決，直接寫個php指令碼，連結資料庫，然後從資料庫中取出所有年級，然後在前端通過showclass（）函式顯示出來；        那麼第3步該怎麼解決呢？當選中年級選項的時候，觸發showcourse（）事件，該事件通過ajax實現，程式碼如下： function showcourse(str){
var xmlhttp; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject(); }      xmlhttp.onreadystatechange=function()        {               if (xmlhttp.readyState==4 && xmlhttp.status==200)               {                     document.getElementById("course").innerHTML=xmlhttp.responseText;               }         }      xmlhttp.open("GET","showcourse.php?="+str,true);      xmlhttp.send(); }        showcourse.php檔案根據傳過來的str引數（該引數就是選擇的年級所對應的的value）從資料庫中檢索該年級所有的科目，然後傳回給ajax，通過document.getElementById("course").innerHTML=xmlhttp.responseText在前端顯示出來。  然後第4步、第5步都跟上面一樣的處理過程。而且，用ajax更大的好處是，檢視不同教師的課表時不用重新整理整個頁面，而是區域性重新整理資料，這也是ajax最美妙的地方。

相關推薦

ajax實現三級聯動下拉選單

  老師最近給了個小任務，排課系統中，將老師的的課表顯示出來，要用到下拉選單三級聯動，在網上找了很多資料，但是看別人的程式碼太吃力了，只要思路清晰，何不自己動手敲一個出來。這裡別看我的程式碼，看思路就好了。 要求：選擇第一個下拉選單的某個選項之後，第二個下拉選單的選項要隨

利用ajax實現二級聯動下拉框

下拉框二級聯動，用ajax來實現是已經非常成熟的技術了。但對於我這個java菜鳥來說，真的是費了九牛二虎之力，各種百度，各種測試。終於得以實現。程式碼相對於網上的容易理解些。現把程式碼和我在編寫的過程中遇到的問題貼出來，對自己也是一個總結，同時也希望能幫助到跟我一樣的菜鳥。

EXCEL如何實現多級聯動下拉選單

首先來說一下我們要實現的效果，就是我們選擇1級選單後，2級選單裡就有對應1級選單的內容，我們選擇2級選單的項的時候，3級選單會產生對應2級選單項的內容，以此類推，來說一下我實現這種功能的原理，就是為不同的列的內容設定了名稱，而這個名稱恰好就是上一級選單裡的選擇項。這樣的情況下，在資料有效性中的函式讀取的其實

Android實現三級聯動下拉框 下拉列表spinner

布局 idt ets county wid 分享圖片 n) 技術分享 parent 主要實現辦法：動態加載各級下拉值的適配器 在監聽本級下拉框，當本級下拉框的選中值改變時，隨之修改下級的適配器的綁定值 XML布局：

省市區三級聯動選單實現及三級聯動下拉列表框預設值的設定

以下是HTML程式碼<html> <body> <label for="select_city">城市</label> <div data-role="controlgroup" id="select_p_c_a" data-ajax="false"&g

ThinkPHP + Ajax 實現2級聯動下拉選單

首先是資料庫的設計。分類表叫cate. 我做的是分類資料的二級聯動，資料需要的欄位有：id,name(中文名),pid(父id). 父id的設定: 若資料沒有上一級，則父id為0，若有上級，則父id為上一級的id。 資料庫有內容後，就可以開始寫程式碼，進行二級聯動的實現。

初學ajax，實現使用者名稱重複提示、二級/三級聯動下拉框

初學ajax，實現非同步操作！                 以下為三級聯動下拉框部分程式碼 jsp頁面部分程式碼 <table> <tr> <th>下拉框:</th> &l

Ajax提高篇（7）Ajax實現簡單的下拉框聯動顯示資料

頁面中的兩個下拉列表框：<tr> <td style="width: 130px"> 所在學院：</td> <td styl

JSON+JS實現省市縣三級聯動下拉框

function Area(selector){ if (!Area.ALL_AREAS) { throw new Error('areas not init！'); } this.selector = selector; $(this.selecto

用jQuery,ajax,實現三級聯動封裝JS的文件

ava [0 success ucc log jquer div 三級 cti // JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV，造三個下拉扔進去 var str =

原生的三級聯動下拉框

for .org char endif cti ima nal height local 最近在工作中遇到了一個需要三級聯動的功能,之前也只用到過地區聯動的三級菜單,還是用的插件,這次就不沒那麽好了,沒辦法,自己寫咯,我下面的寫出來的是原生的;寫的不好,不要噴我 一共有三個

jQuery cxSelect 聯動下拉選單

外掛簡介 cxSelect 是基於 jQuery 的多級聯動選單外掛，適用於省市、商品分類等聯動選單。 列表資料通過 AJAX 獲取，也可以自定義，資料內容使用 JSON 格式。 同時相容 Zepto，方便在移動端使用。 國內省市縣資料來源：basecss/cityData 下載及演示 演示地址：htt

JS--jQuery實現的多級下拉選單效果程式碼

這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下： 這是一款jQuery多級下拉選單，在支援html5

前端省市區（縣）三級聯動下拉框

呼叫省市區的思想要先確定下來，一般是有多處呼叫，所以將省市區三級聯動抽取為工具js！ 靜態頁面例子： <html> <head> <script type="text/javascript" src="address.js"></script

省市區縣街道四級聯動下拉選單

參考程式碼： 　　JQuery中國省市區街道三級、四級聯動下拉選單外掛 　　（將程式碼中單純的四級聯動提取出來，對其中的bug進行了修正，並完善了一些不完美的地方） 先通過最終效果看一下功能： 程式碼如下： index.html:（注：請將程式碼中的jquery.min.js替換成你本地的jqu

easyUI的ajax 實現三級聯動

 1. jackson    Jackson是一個簡單基於Java應用庫，Jackson可以輕鬆的將Java物件轉換成json物件    和xml文件，同樣也可以將json、xml轉換成Java物件 使用map集合來實現後臺的增加刪除修改等 要轉成json的物件  

html+css+js實現的簡易下拉選單

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java" contentType="text/html; charset

jquery二級聯動下拉選單

function getSelectVal(){ $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ var smallname = $("#smallname"); $("op

簡單的js日期三級聯動下拉程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js省市縣三級聯動下拉列表的示例

function selectOnChange(SelId,toSelId){//document.getElementById(toSelId).innerHTML="";$.ajax({url:"<%=basePath%>medium/findAreaByParentId.do",type:"