jQuery-jquery 同一元素 二级联动

前端开发 前端开发 主题:1148 回复:2395

jQuery-jquery 同一元素 二级联动

偏爱自由 发布于 2017-03-08 字数 7780 浏览 1029 回复 2

先看看图片中的红框
需要在点击交通方式时,只后面的车辆类型中的变化
第二个框点击交通方式不不影响其他车辆类型的变化
请问如何写呢,谢谢

请输入图片描述

点击第一个框中的交通方式后,两个框中的车辆类型同时变化,纳闷了

<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(){
// $('.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);
// $('[Class=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>
<!-- 2-->
<div class="dhtmlgoodies_aTab">
<input name="RecNum" id="RecNum" type="hidden" value="2" />
<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>
<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>

function GetSelect(byval pid,selected,BodyName)
sql_tmp="select trs_mid,trs_pid,trs_text from tr_sort where trs_pid='"&pid&"' and trs_check=1 order by trs_mid"
if pid <>"" then
set rs_tmp=ado_query(sql_tmp)
' echo sql
if rs_tmp.eof then
exit function
else
' echo "<select name="""&BodyName&""" id="""&BodyName&""" onchange=""onchg_select(this.value,'','AcS_CarModel');"" />"
echo "<select name="""&BodyName&""" class="""&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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

清晨说ぺ晚安 2017-07-28 2 楼

<script>
$(".AcS_CarType").live("change",function(){
var trs_pid = $(this).val();
var gethtml;
$.ajax({
type:"GET",
url:"control?do=chg_select",
async:false,
// dataType:"html",
data:"arg="+trs_pid,
success: function(data){
gethtml=data;
}
});

    $(this).parent().next().next().children().html(gethtml);
  });
&lt;/script&gt;

该问题已经解决了!

灵芸 2017-03-22 1 楼

设定一下作用范围,在当前“交通方式”元素的父级(parents)中查找“车辆类型”,如果他们是先后关系的话,可以用next()方法获取紧跟其后的下拉框.
不要直接echo,把处理好的select框,在通过jquery复制

<tr>
<th>交通方式</th>
<td><%call GetSelect ("11","","AcS_CarType")%></td>
<th>车辆类型</th>
<td><%call GetSelect ("10","","AcS_CarModel")%></td>
</tr>
//从父级找
$(this).parents('tr').last('td').html(selecthtml);
//从平级元素找
$(this).next('td').html(selecthtml);