Verwenden Sie Ajax, um eine ausgewählte dreistufige Verknüpfungsfunktion zu implementieren

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von Ajax zur Implementierung der ausgewählten dreistufigen Verknüpfungsfunktion vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Dieser Artikel verwendet Ajax-Technologie, um Daten aus der Datenbank abzurufen und ausgewählte dreistufige Verknüpfungen dynamisch zu implementieren. Das Rendering ist wie folgt:

Die Vorderseite. Der End-JS-Code lautet wie folgt:

<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=1",
 success:function(data){
 // 由JSON字符串转换为JSON对象
  var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length; 
 var objSelect=document.getElementById("firstlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
   alert(errorThrown); 
  }
});
});
//显示二级分类
function firstlevel_Click(){
var objfirst=document.getElementById("firstlevel");
var index=objfirst.selectedIndex; //选中索引 
var itemcode=objfirst.options[index].value; //选中值
if(itemcode==0){
alert("请选择事件类别");
return;
}
// 删除二级分类保留第一个
var objsecond=document.getElementById("secondlevel");
for(var i=objsecond.options.length-1;i>0;i--){
objsecond.options.remove(i);
}
// 删除三级分类保留第一个
var objthird=document.getElementById("thirdlevel");
for(var i=objthird.options.length-1;i>0;i--){
objthird.options.remove(i);
}
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=2&itemcode="+itemcode,
 success:function(data){
 // 由JSON字符串转换为JSON对象
  var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length;
 var objSelect=document.getElementById("secondlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
   alert(errorThrown); 
  }
});
}
//显示三级分类
function secondlevel_Click(){
var objsecond=document.getElementById("secondlevel");
var index=objsecond.selectedIndex; //选中索引 
var itemcode=objsecond.options[index].value; //选中值
if(itemcode==0){
alert("请选择事件类别");
return;
}
// 删除三级分类保留第一个
var objthird=document.getElementById("thirdlevel");
for(var i=objthird.options.length-1;i>0;i--){
objthird.options.remove(i);
}
$.ajax({
type:"get",
dataType:"text",
url:"GetItemAction?itemlevel=3&itemcode="+itemcode,
 success:function(data){
 // 由JSON字符串转换为JSON对象
  var objJSON=eval("("+data+")");
 var len=objJSON.itemInfo.length;
 var objSelect=document.getElementById("thirdlevel");
 for(var i=0;i<len;i++){
 var op=new Option(objJSON.itemInfo[i].itemname,objJSON.itemInfo[i].itemcode);
 objSelect.add(op);
 } 
 },
error: function (XMLHttpRequest, textStatus, errorThrown) { 
   alert(errorThrown); 
  }
});
}

Teil des HTML-Codes

<table class="table-exposure">
 <tr>
 <td height="40">
 <select id="firstlevel" onchange="firstlevel_Click()" style="width:99%;font-size:1em;">
 <option value="0">请选择事件大类</option>
 </select>     
 </td>
 </tr>
 <tr>
 <td height="40">
 <select id="secondlevel" onchange="secondlevel_Click()" style="width:99%;font-size:1em;">
 <option value="0">请选择事件小类</option>
 </select>
 </td>
 </tr>
 <tr>
 <td height="40">
 <select id="thirdlevel" style="width:99%;font-size:1em;">
 <option value="0">请选择事件类别</option>
 </select>
 </td>
 </tr>
 </table>

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schritte zur Implementierung der autorisierten Anmeldung auf der WeChat-Webseite mit Ajax (mit Code)

Beurteilen Sie die ID Karte So schreiben Sie das reguläre Format einer Bankkartennummer

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um eine ausgewählte dreistufige Verknüpfungsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!