Share the interaction between Jquery Ajax Select and three instances

use Jquery-ajax to change the Select label for linkage

There is a set of select tags on the page, and their IDs are ClientType and type respectively. Type changes with the ClientType selection.

Instance:

$ (' #clientType '). Change (function () {

var val = $ (' #clientType option:selected '). Val ()//Get the currently selected value

Request different data according to different circumstances

if (val = = 1) {

$ (' #type '). Empty ()//Empty the type

$.ajax ({

URL: "/message/template/gettype?type=1",

Async:true,

Type: ' Get ',

ContentType: "Application/json",

DataType: "JSON",

Success:function (data) {

$.each (Data,function (k,p) {

$ (' #type '). Append (' <option value= "' +p.code+ '" > ' +p.cname+ ' </option> ');

});

} else {

$ (' #type '). Empty ()//Empty the type

$.ajax ({

URL: "/message/template/gettype?type=2",

Async:true,

Type: ' Get ',

ContentType: "Application/json",

DataType: "JSON",

Success:function (data) {

$.each (Data,function (k,p) {

$ (' #type '). Append (' <option value= "' +p.code+ '" > ' +p.cname+ ' </option> ');

});

}

});

}

});


jquery Ajax Read Linkage menu select Menu

Demonstrate

JavaScript Code
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ (". Country"). Change (function ()
{
var id=$ (this). Val ();
var datastring = ' id= ' + ID;

$.ajax
({
Type: "POST",
URL: "ajax.php",
Data:datastring,
Cache:false,
Success:function (HTML)
{
$ (". City"). HTML (HTML);
}
});

});
});
</script>

Xml/html Code
<div style= "margin:20px" >
<label> Big class:</label> <select name= "Country" class= "Country" >
<option selected= "Selected" >--Select--</option>
<?php
Include ('.. /.. /conn.php ');
$sql =mysql_query ("SELECT * from Bigclass");
while ($row =mysql_fetch_array ($sql))
{
$id = $row [' Bigclassid '];
$data = $row [' Bigclassname '];
Echo ' <option value= '. $id. ' " > '. $data. ' </option> ';
}?>
</select> <br/><br/>
<label> Small Class:</label>
<select name= "City" class= "City" >
<option selected= "Selected" >--Select--</option>
</select>
</div>
ajax.php
PHP Code
<?php
Include (' conn.php ');
if ($_post[' id '))
{
$id =$_post[' id '];
$sql =mysql_query ("select * from Smallclass where bigclassid= ' $id '");

while ($row =mysql_fetch_array ($sql))
{
$id = $row [' Smallclassid '];
$data = $row [' Smallclassname '];
Echo ' <option value= '. $id. ' " > '. $data. ' </option> ';

}
}

?>


Select Drop-down Box linkage based on jquery (Cascade)

This is the time to instruct the students to complete the training program, by a use of jquery in the Drop-down box (SELECT) Linkage (add delete option), originally in the class are said, but a long time to forget, the following this simple JS paste out, to the beginners a demo bar, When a student can't write, he can find a reference here.

Code Essentials:

1. Use jquery to add option elements to the SELECT tag directly using:

$ ("filter character"). Append ("<option value= ' hidden value ' > display text </option>")

2. Empty all elements of the Select can be used:

$ (". Child"). HTML ("")

Or is

$ (". Child"). Empty ()

3. Get select Tag Selection value: (Call Val () method directly)

$ (". Parent"). Val ()

The following is the full text of the sample JSP page:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta http-equiv= "Pragma" content= "No-cache"/>
<meta http-equiv= "Cache-control" content= "No-cache"/>
<meta http-equiv= "Expires" content= "0"/>
<title> Drop-down box cascading operations based on jquery </title>
<script type= "Text/javascript" src= "Js/jquery-1.4.4.min.js" ></script>
<script type= "Text/javascript" >
function Changchild (tid) {
$.post ("Childselect", {"Tid": tid},function (JSON) {
$ (". Child"). HTML ("");//Empty student dropdown box
for (Var i=0;i<json.length;i++) {
Add a Student
$ (". Child"). Append ("<option value= '" +json[i].id+ "' >" +json[i].name+ "</option>");
}
}, ' json ');
}
$ (function () {
Initialize Teachers dropdown box
$.post ("Parentselect", Null,function (JSON) {
for (Var i=0;i<json.length;i++) {
Add a teacher
$ (". Parent"). Append ("<option value= '" +json[i].id+ "' >" +json[i].name+ "</option>");
}
Changchild ($ (". Parent"). Val ());
}, ' json ');
Registered Teacher Dropdown Box Event
$ (". Parent"). Change (function () {
Changchild ($ (this). Val ());
});
});
</script>
<body>
<p>
Change the teacher Drop-down box, send an AJAX request, and repopulate the student Drop-down box based on the returned JSON data.
</p>
<select class= "Parent" ></select>
<select class= "Child" ></select>
</body>

The server is using a struts action to convert the data to a JSON string with Json-lib: (see full text)

public class Selectchangeaction {
private static list<teacher> teachers = new arraylist<teacher> ();
private static list<student> students = new arraylist<student> ();
private int tid;
static{
Teacher Teacher = null;
Student Student = null;
for (int i=0;i<10;i++) {
Teacher = new Teacher ();
Teacher.setid (i);
Teacher.setname ("Teacher" "+i+" "");
for (int j=0;j<10;j++) {
Student = new Student ();
Student.setid (j);
Student.setname (Teacher.getname () + "Students" "+i+" | " +j+ "" ");
Student.setteacher (teacher);
Students.add (student);
}
Teachers.add (teacher);
}
}

/**
* Output Teacher Information
* @return
*/
Public String parent () {
String JSON = jsonarray.fromobject (teachers). toString ();
HttpServletResponse response = Servletactioncontext.getresponse ();
Response.setcharacterencoding ("UTF-8");
try {
Response.getwriter (). write (JSON);
catch (IOException e) {
E.printstacktrace ();
}
return null;
}
/**
* Output Student Information
* @return
*/
Public String Child () {
list<student> list = new arraylist<student> ();
for (Student student:students) {
if (Student.getteacher (). GetId () = = tid) {
List.add (student);
}
}
String json = jsonarray.fromobject (list). ToString ();
HttpServletResponse response = Servletactioncontext.getresponse ();
Response.setcharacterencoding ("UTF-8");
try {
Response.getwriter (). write (JSON);
catch (IOException e) {
E.printstacktrace ();
}
return null;
}
public int Gettid () {
return TID;
}
public void Settid (int tid) {
This.tid = tid;
}
}