The basic method for ajax to implement three-level linkage,
The examples in this article share the code for implementing three-level interaction in ajax for your reference. The details are as follows:
1. First, deploy a div on a page to facilitate future reference.
<Body> <div id = "sanji"> // div id is "sanji" </div>
2. sanji js processing page
$ (Document ). ready (function () {// put three drop-down menus into the div var str = "<select id = 'sheng'> </select> <select id = 'shi '> </select> <select id = 'qu'> </select> "; // define the str variable $ ("# sanji" ).html (str); FillSheng (); FillShi (); FillQu () for the three drop-down lists (); // logical sequence of Sheng Shi Qu $ ("# sheng "). change (function () {FillShi (); FillQu () ;}) // Add a click event to the sheng menu $ ("# shi "). change (function () {FillQu () ;}) // Add click events to the shi menu}); // execute some code after the page is loaded.
3. Fill sheng Method
Function FillSheng () {var pcode = ""; // defines a variable $. ajax ({url: "chuli. php ", data: {pcode: pcode}, type:" POST ", dataType:" TEXT ", success: function (data) {var hang = data. split ("^ "); str + = "<option value = '" + lie [0] + "'>" + lie [1] + "</option> ";} $ ("# sheng" 2.16.html (str );});}
2. Fill shi Method
function FillShi(){ var pcode = $("#sheng").val(); $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i
3. qu Filling Method
function FillQu(){ var pcode = $("#shi").val(); $.ajax({ url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i
4. chuli page
<?phpinclude("DBDA.class.php");$db = new DBDA();$pcode = $_POST["pcode"];$sql = "select * from chinastates where parentareacode='{$pcode}'";echo $db->StrQuery($sql);
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
