jquery二级联动多个同ID元素怎么实现

2012-12-14

jquery二级联动多个同ID元素如何实现？先见图片目的是点击上面的红框中交通方式，产生的二级联动对应的是

jquery二级联动多个同ID元素如何实现？
先见图片
目的是点击上面的红框中交通方式，产生的二级联动对应的是后面车辆类型，
下方的红框中点击交通方式只对本框中车辆类型做更改，
目前是无论点击上方或下方方框中的交通方式，两个车辆类型都做更改，
其中上下两个下拉框的name和Id都是一样的名称。这样做便于ajax传递给后台存入数据库
各位，如何实现独立控制呢？谢谢。
[解决办法]
由于代码长，分两端贴上

<%if not IN_FREECONTEX then Response.Write("Access Denied") : Response.End()%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading... - <%=SYSTEM_NAME%> - 控制台</title><%if 0 then%>
<link href="../../system/skins/default/skin.css" rel="stylesheet" type="text/css" /><%end if%>
<link href="<%=str_root_path&LOCAL_SKINSET%>skin.css" rel="stylesheet" type="text/css" />
<link href="<%=str_root_path&module_kernel("root")%>tools/calendar/calendar.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="<%=str_root_path&module_kernel("root")%>scripts/lib.jquery.js"></script>
<script language="javascript" type="text/javascript" src="<%=str_root_path&module_kernel("root")%>scripts/lib.system.js"></script>
<script language="javascript" type="text/javascript" src="<%=str_root_path&module_kernel("root")%>scripts/navigation.js"></script>
<script language="javascript" type="text/javascript" src="scripts/ctr.traffic.js"></script>
<script language="javascript" type="text/javascript" src="<%=str_root_path&module_kernel("root")%>tools/calendar/calendar.js"></script>
    
</head>
<body class="stage">
<!--#include file="page.header.inc"-->
<table class="mtable center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="L">&nbsp;</td>
<td id="menus" class="C">
<!--#include file="page.menus.inc"-->
<%if not user_rights_check("traffic-edit") then'权限控制%>
<table class="ltable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><span class="norights"><%=SYSTEM_NORIGHTS%></span></td>
</tr>
</table>
<%else'权限控制%>
<form id="form_traffic_add" name="form_traffic_add" method="post" action="#trafficadd" onsubmit="traffic_do('add');return false;">

<table class="ftable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="15%">事故编号</th>
<td width="35%"><input name="AcM_AccidentNo" type="text" id="AcM_AccidentNo" size="30" maxlength="20"  /></td>
<th width="15%">事故分类</th>
<td width="35%"><%call GetSelect ("4","","AcM_AccidentType")%></td>
</tr>
<tr>
<th>受案编号</th>
<td><input name="AcM_No" type="text" id="AcM_No" value="<%=AcM_No%>" size="30" maxlength="20" readonly="readonly"  /></td>
<th>&nbsp;</th>
<td>&nbsp;</td> 
 
</tr>
<tr>
<th>天气情况</th>
<td><%call GetSelect ("1","","AcM_Weather")%></td>
<th>事故时间</th>
<td><input name="AcM_DateTime" type="text" id="AcM_DateTime" size="30" maxlength="30" value="<%=str_time("y-mm-dd hh:ii:ss",now())%>" />
  <a href="#" onclick="return showCalendar('AcM_DateTime','y-mm-dd',true);"><img src="<%=str_root_path&module_kernel("root")%>skins/default/icon_tool.gif" alt="jquery二级联动 多个同ID元素 怎么实现" width="18" height="18" border="0" /></a></td>
</tr>
<tr>
  <th>公路等级</th>
  <td><%call GetSelect ("3","","AcM_RoadLevel")%></td>
  <th>道路类型</th>
  <td><%call GetSelect ("2","","AcM_RoadType")%></td>
  </tr>
<tr>
  <th>事故地点</th>
  <td><input name="AcM_AccidentAddress" type="text" id="AcM_AccidentAddress" size="30" maxlength="50" /></td>
  <th>办案人</th>
  <td><%if not inull(Session("UserName")) then%>
        <input class="AcM_Person" id="AcM_Person" name="AcM_Person" value="<%=Session("UserName")%>" readonly="readonly" type="text" size="30" maxlength="10" />
        <%else%>
        <input class="AcM_Person" id="AcM_Person" name="AcM_Person" type="text" size="30" maxlength="10" />
        <%end if%></td>
  </tr>
<tr>
  <th>结案</th>
  <td><input type="checkbox" class="checkbox" name="AcM_CheckClosure" id="AcM_CheckClosure" value="1"<%'if rst("AcM_CheckClosure") then echo " checked=""checked"""%> /><label for="AcM_CheckClosure">已结案</label></td>
  <th>上报</th>
  <td><input type="checkbox" class="checkbox" name="AcM_CheckReport" id="AcM_CheckReport" value="1"<%'if rst("AcM_CheckReport") then echo " checked=""checked"""%> />
    <label for="AcM_CheckReport">已上报 </label></td>
  </tr> 
</table>

<!-- *******************************************-->
<div id="dhtmlgoodies_tabView">
<!-- 1-->
<div class="dhtmlgoodies_aTab">
        <input name="RecNum" id="RecNum" type="hidden" value="1" />
<table class="ftable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="15%">姓名</th>
<td width="35%"><input name="AcS_Name" type="text" id="AcS_Name" size="30" maxlength="20" /></td>
<th width="15%">性别</th>
<td width="35%"><%call GetSelect ("5","","AcS_Sex")%></td>
</tr>
<tr>
<th>籍贯</th>
<td><%call GetSelect ("8","","AcS_Province")%></td>
<th>年龄</th>
<td><input name="AcS_Age" type="text" id="AcS_Age" size="30" maxlength="20" /></td> 
 
</tr>
<tr>
<th>文化程度</th>
<td><%call GetSelect ("6","","AcS_Edu")%></td>
<th>伤亡情况</th>
<td><%call GetSelect ("12","","AcS_Casualtes")%></td>
</tr>
<tr>
  <th>单位(地址)</th>
  <td><input name="AcS_Address" type="text" id="AcS_Address" size="30" maxlength="50" /></td>
  <th>单位职业</th>
  <td><%call GetSelect ("7","","AcS_Work")%></td>
  </tr>
<tr>
  <th>身份证(驾驶证)</th>
  <td><input name="AcS_IdCard" type="text" id="AcS_IdCard" size="30" maxlength="18" /></td>
  <th>驾龄</th>
  <td><input name="AcS_Year" type="text" id="AcS_Year" size="30" maxlength="20" /></td>
  </tr>
<tr>
  <th>车牌号码</th>
  <td><input name="AcS_CarNo" type="text" id="AcS_CarNo" size="30" maxlength="20" /></td>
  <th>发证机构</th>
  <td><%call GetSelect ("9","","AcS_Organ")%></td>
  </tr>
<tr>
  <th>交通方式</th>
    <script>
$("#AcS_CarType").live("change",function(){

var trs_pid = $(this).val();
var url = 'control?do=chg_select&arg=' + trs_pid + '&timestemp=' + (new Date()).getTime();
$.get(url,function(data){
$('[ID=AcS_CarModel]').html(data);
//alert();
//alert(data);
});
  });
</script>
  <td><%call GetSelect ("11","","AcS_CarType")%></td>
  <th>车辆类型</th>
  <td><%call GetSelect ("10","","AcS_CarModel")%></td>
  </tr>
<tr>
  <th>事故损失</th>
  <td><input name="AcS_Losses" type="text" id="AcS_Losses" size="30" maxlength="20" /></td>
  <th>&nbsp;</th>
  <td></td>
  </tr>
</table>
  </div>

[解决办法]

<!-- 2-->
<div class="dhtmlgoodies_aTab">
        <input name="RecNum" id="RecNum" type="hidden" value="1" />
<table class="ftable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="15%">姓名</th>
<td width="35%"><input name="AcS_Name" type="text" id="AcS_Name" size="30" maxlength="20" /></td>
<th width="15%">性别</th>
<td width="35%"><%call GetSelect ("5","","AcS_Sex")%></td>
</tr>
<tr>
<th>籍贯</th>
<td><%call GetSelect ("8","","AcS_Province")%></td>
<th>年龄</th>
<td><input name="AcS_Age" type="text" id="AcS_Age" size="30" maxlength="20" /></td>
</tr>
<tr>
<th>文化程度</th>
<td><%call GetSelect ("6","","AcS_Edu")%></td>
<th>伤亡情况</th> 
 
<td><%call GetSelect ("12","","AcS_Casualtes")%></td>
</tr>
<tr>
  <th>单位(地址)</th>
  <td><input name="AcS_Address" type="text" id="AcS_Address" size="30" maxlength="50" /></td>
  <th>单位职业</th>
  <td><%call GetSelect ("7","","AcS_Work")%></td>
  </tr>
<tr>
  <th>身份证(驾驶证)</th>
  <td><input name="AcS_IdCard" type="text" id="AcS_IdCard" size="30" maxlength="18" /></td>
  <th>驾龄</th>
  <td><input name="AcS_Year" type="text" id="AcS_Year" size="30" maxlength="20" /></td>
  </tr>
<tr>
  <th>车牌号码</th>
  <td><input name="AcS_CarNo" type="text" id="AcS_CarNo" size="30" maxlength="20" /></td>
  <th>发证机构</th>
  <td><%call GetSelect ("9","","AcS_Organ")%></td>
  </tr>
<tr>
  <th>交通方式</th>
    <script>
//$("#AcS_CarType").bind("change",function(){
//$('#AcS_CarType').change(function(){
//var trs_pid = $(this).val();
//var url = 'control?do=chg_select&arg=' + trs_pid + '&timestemp=' + (new Date()).getTime();
//$.get(url,function(data){
//$('#AcS_CarModel').html(data);
//alert(data);
//});
//  });

</script>
  <td><%call GetSelect ("11","","AcS_CarType")%></td>
  <th>车辆类型</th>
  <td><%call GetSelect ("10","","AcS_CarModel")%></td>
  </tr>
<tr>
  <th>事故损失</th>
  <td><input name="AcS_Losses" type="text" id="AcS_Losses" size="30" maxlength="20" /></td>
  <th>&nbsp;</th>
  <td></td>
  </tr>
</table>
  </div>

</div>

<!-- *******************************************-->

<div 
 
echo "<select name="""&BodyName&""" id="""&BodyName&""" />"
echo "<option value=''>--请选择--</option>"
while not rs_tmp.eof

if selected=rs_tmp("trs_mid") then
echo "<option value='"&rs_tmp("trs_mid")&"'  selected='selected'>"&rs_tmp("trs_text")&" </option>"
else
echo "<option value='"&rs_tmp("trs_mid")&"'>"&rs_tmp("trs_text")&" </option>"
end if
rs_tmp.movenext:wend
echo "</select>"
end if
rs_tmp.close : set rs_tmp = nothing
end if
end function

function AcM_No
Randomize
acm_no=Format_Time(now(), 6)&int(1000*rnd)
end function

%>

[解决办法]
你的页面怎么会有多个重复的ID，你可以打开页面，右键查看源文件，看看这些控件的ID是什么?再有就是你不一定要使用ID来找到这个控件，可以找到相同的控件，然后遍历，那个点击处理哪个
[解决办法]
重复ID,明显不符合W3C。为什么不是重复class？class可以多个同时使用，如：class="click hover link"
[解决办法]
重复id肯定会有问题的，你可以有规律的给这两组空间取值，然后点击不同组件的“交通方式”实现对应的车辆的更新
[解决办法]
为什么要使用id呢~
[解决办法]
你加个class $('.xxx,.xxx1,.xxx2') 不就好了
[解决办法]
换种方法吧，打算找个ui的框架从新做。谢谢各位。

热点排行

Ajax

jquery二级联动 多个同ID元素 怎么实现

jquery二级联动多个同ID元素怎么实现