这个是三级联动，值是预设，你换乘带参数的动态接口数据即可
成都创新互联主要从事做网站、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务平坝,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
script language="JavaScript" type="text/javascript"
function createCode()
{
//数组赋值
var varname = new Array(4);
varname[0] = "请选择";
varname[1] = "红色";
varname[2] = "黄色";
varname[3] = "蓝色";
//下拉框赋值
for(var i=0;i4;i++)
{
document.getElementById('xlk1').options[i] = new Option(varname[i],i);
}
copy();
}
//复制下拉框一给下拉框二
function copy()
{
for(i=0;idocument.getElementById("xlk1").options.length;i++)
{
document.getElementById('xlk2').options[i] = new Option(document.getElementById("xlk1").options[i].text,i)
}
copytwo();
}
//复制下拉框一给下拉框二
function copytwo()
{
for(i=0;idocument.getElementById("xlk2").options.length;i++)
{
document.getElementById('xlk3').options[i] = new Option(document.getElementById("xlk2").options[i].text,i)
}
}
function onChange1()
{
//获取下拉框1的选中项
var strid=document.getElementById("xlk1").value;
//获取选中项的内容
//var strtxt=document.getElementById("xlk1").options[window.document.getElementById("xlk1").selectedIndex].text;
//获取指定ID下拉框的项总数
//var strnub=document.getElementById("xlk1").options.length;
copy();
if(strid != 0)
{
document.getElementById("xlk2").options.remove(strid);
document.getElementById("xlk3").options.remove(strid);
}
document.getElementById("textfield").value=strid+strtxt+strnub;
}
function onChange2()
{
//获取下拉框1的选中项
var strid2=document.getElementById("xlk2").selectedIndex;
//获取选中项的内容
var strtxt2=document.getElementById("xlk2").options[window.document.getElementById("xlk2").selectedIndex].text;
//获取指定ID下拉框的项总数
var strnub2=document.getElementById("xlk2").options.length;
copytwo();
if(strid2 != 0)
{
document.getElementById("xlk3").options.remove(strid2);
}
}
/script
body onLoad="createCode()"
form id="form1" name="form1" method="post" action=""
select name="xlk1" id="xlk1" onChange="onChange1()"/select
select name="xlk2" id="xlk2" onChange="onChange2()"/select
select name="xlk3" id="xlk3"/select
/form
得先知道后台接口给ajax访问（接口URl和传入接口的参数及参数类型），知道访问之后返回的数据类型，有哪些数据。
选择异步请求的方式，常用的有三种，如$.ajax()、$.post()、$.get()。
其中$.ajax允许get/post两种请求方式，$.get()只允许get请求，$.post()只允许post请求方式。
异步请求所需要的常用要素：
a、url （访问url） b、dataType（数据传输方式） c、success成功之后的回调函数。
$.ajax使用示范代码（由于异步请求的参数较多，实例只是常用参数，下同）。
设接口url
var url='/test/test.do'; //下面的实例代码都用此访问接口url
$.ajax({
url:url,
dataType:'text',
success: function(data){
(请求成功之后的前端处理代码)
}
});
$.post使用示范代码：
$.post(url, { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
},'text');
$.get使用实例代码：
$.get(url, { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
看，jQuery异步请求简单吧。学会这三种方式做前后端交互基本就够用了。
接口通常都是由开发者设定的，返回规则也是由开发者进行定制，一般得到授权的用户都会得到开发者提供的请求格式，然后用户根据自己需求来进行数据提取，但是，请求返回的数据也是由开发商定制的规则来限制的，也就是说，html可以用开发者提供的请求地址来进行AJAX请求。虽然说可以自己选择使用js还是jquery。但是主要请求格式仍然是开发者定制的返回规则。
不能变更的是：接口请求地址，接口url参数名，必须传递的参数必须给它传回去，这样服务器才会响应你的请求，服务器一般会返回json格式的数据给你进行调用。每个接口都有自己的开发手册，主要是介绍：请求格式说明、返回值说明、参数说明等。
不是很明白？你想把前台的json传给后台吗？
如果是，加多个参数dataType:json,data:json_data,
即json_data = {
"pwd" : "password" // 可选
"address":"xxxxx,张三", //联系人 和收货地址放在一起
"mobile":"123456789",
"email":"email123@QQ.com"
};
希望能够帮到你！
