下拉框如何实现联动 条件: 两个下拉框如何实现联动。 两个 关键点在联动的时候如何把第二个list中的数据给缩小范围。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你可以看看这个联动select效果是怎样实现的 用Jquery写了个简单的例子运行的话需要下载个Jquery包,希望对楼主有所帮助<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript" src="jquery-1.3.js"></script> <script type="text/javascript"> function set(obj){ var selectLength=obj.find('option').length; for(var i=0;i<selectLength;i++){ if(obj.find('option').eq(i).attr('selected')){ $('#select2').html('');//清空第二个下拉框 if(i==0){ $('#select2').append('<option>1</option>');//加入选择项 $('#select2').append('<option>3</option>');//加入选择项 } if(i==1){ $('#select2').append('<option>2</option>');//加入选择项 $('#select2').append('<option>4</option>');//加入选择项 } } } } </script> </HEAD> <BODY> <select id="select1" onchange="set($(this))"> <option>1</option> <option>2</option> </select> <select id="select2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </BODY></HTML> 建议楼主看看偶写的代码二级联动:http://little-bill.javaeye.com/blog/724573三级联动:http://little-bill.javaeye.com/blog/724577还有如果不想再js里把数据写死。建议还是用ajax吧。当第一select change事件之后提交一个ajax请求,返回一个json数据。放在第二个select里面; 这两个下拉框LIST中的内容是从SESSION中取得到的,然后转给JAVASCRIPT代码中进行操作。关键是现在 第二个下拉框的LIST是没有加如第一个下拉框的所有数据!省市联动的下拉框都写死了,就是已经是按照第一个条件之后的结果了! http://www.scriptlover.com/controls/AreaPicker/index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>selectOptions3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function madeadd(){ var madeAdd = document.forms[0].address; var madeAdd1 = document.forms[0].address1; if(madeAdd.options[0].selected == true){ madeAdd1.options.length = 0; madeAdd1.options.add(new Option("s", "s")); } if(madeAdd.options[1].selected == true){ madeAdd1.options.length = 0; madeAdd1.options.add(new Option("武汉", "武汉")); madeAdd1.options.add(new Option("黄冈", "黄冈")); madeAdd1.options.add(new Option("浠水", "浠水")); madeAdd1.options.add(new Option("罗田", "罗田")); madeAdd1.options.add(new Option("大冶", "大冶")); madeAdd1.options.add(new Option("蕲春", "蕲春")); } if(madeAdd.options[2].selected == true){ madeAdd1.options.length = 0; madeAdd1.options.add(new Option("长沙", "长沙")); madeAdd1.options.add(new Option("南昌", "南昌")); } } window.onload = function () { var temp = document.forms[0].address; var madeAdd1 = document.forms[0].address1; temp.value = "hb";//"之前选择的值"; if (temp.value == "hb") { madeAdd1.options.add(new Option("武汉", "武汉")); madeAdd1.options.add(new Option("黄冈", "黄冈")); madeAdd1.options.add(new Option("浠水", "浠水")); madeAdd1.options.add(new Option("罗田", "罗田")); madeAdd1.options.add(new Option("大冶", "大冶")); madeAdd1.options.add(new Option("蕲春", "蕲春")); } if(temp.value == "hn"){ madeAdd1.options.add(new Option("长沙", "长沙")); madeAdd1.options.add(new Option("南昌", "南昌")); } madeAdd1.value = "蕲春";//第二个文本框选择的值 }; </script> </head> <body> <form> <select name="address" onchange="madeadd()"> <option value=""></option> <option value="hb">湖北</option> <option value="hn">湖南</option> </select> <select name="address1"> <option value=""> </option> </select> </form> </body></html> 框架页如何在导航中标记当前页 EXT中有个浏览器判断的方法,那里定义的那些全局变量为啥我不能直接用啊? 关于JS取上一页地址的问题 formatCurrency 格式化金额 对象的dragDrop()在Firefox中是怎样用的? 求助表单验证 如何解决遮罩 用的框架上有两个页面(.jsp文件),怎样实现在一个页面上点击一个按钮,在另一个页面上做出反应 如何去除IE的菜单条,工具条,地址条和状态条,并且屏蔽热键“F5”和右键菜单,谢谢 我要做个动态的n层菜单,做成对象。使使用者可以调用这个对象里的属性和方法?关于位置问题 批量复选框拿值问题 一个很奇怪的现象
运行的话需要下载个Jquery包,希望对楼主有所帮助
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
function set(obj){
var selectLength=obj.find('option').length;
for(var i=0;i<selectLength;i++){
if(obj.find('option').eq(i).attr('selected')){
$('#select2').html('');//清空第二个下拉框
if(i==0){
$('#select2').append('<option>1</option>');//加入选择项
$('#select2').append('<option>3</option>');//加入选择项
}
if(i==1){
$('#select2').append('<option>2</option>');//加入选择项
$('#select2').append('<option>4</option>');//加入选择项
}
}
}
}
</script>
</HEAD> <BODY>
<select id="select1" onchange="set($(this))">
<option>1</option>
<option>2</option>
</select>
<select id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</BODY>
</HTML>
二级联动:
http://little-bill.javaeye.com/blog/724573
三级联动:
http://little-bill.javaeye.com/blog/724577还有如果不想再js里把数据写死。
建议还是用ajax吧。当第一select change事件之后提交一个ajax请求,返回一个json数据。放在第二个select里面;
关键是现在 第二个下拉框的LIST是没有加如第一个下拉框的所有数据!
省市联动的下拉框都写死了,就是已经是按照第一个条件之后的结果了!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selectOptions3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function madeadd(){
var madeAdd = document.forms[0].address;
var madeAdd1 = document.forms[0].address1;
if(madeAdd.options[0].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("s", "s"));
}
if(madeAdd.options[1].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("武汉", "武汉"));
madeAdd1.options.add(new Option("黄冈", "黄冈"));
madeAdd1.options.add(new Option("浠水", "浠水"));
madeAdd1.options.add(new Option("罗田", "罗田"));
madeAdd1.options.add(new Option("大冶", "大冶"));
madeAdd1.options.add(new Option("蕲春", "蕲春"));
}
if(madeAdd.options[2].selected == true){
madeAdd1.options.length = 0;
madeAdd1.options.add(new Option("长沙", "长沙"));
madeAdd1.options.add(new Option("南昌", "南昌"));
}
}
window.onload = function () {
var temp = document.forms[0].address;
var madeAdd1 = document.forms[0].address1;
temp.value = "hb";//"之前选择的值";
if (temp.value == "hb") {
madeAdd1.options.add(new Option("武汉", "武汉"));
madeAdd1.options.add(new Option("黄冈", "黄冈"));
madeAdd1.options.add(new Option("浠水", "浠水"));
madeAdd1.options.add(new Option("罗田", "罗田"));
madeAdd1.options.add(new Option("大冶", "大冶"));
madeAdd1.options.add(new Option("蕲春", "蕲春"));
}
if(temp.value == "hn"){
madeAdd1.options.add(new Option("长沙", "长沙"));
madeAdd1.options.add(new Option("南昌", "南昌"));
}
madeAdd1.value = "蕲春";//第二个文本框选择的值
};
</script> </head>
<body>
<form>
<select name="address" onchange="madeadd()">
<option value=""></option>
<option value="hb">湖北</option>
<option value="hn">湖南</option>
</select>
<select name="address1">
<option value=""> </option>
</select>
</form>
</body>
</html>