jquery或者js实现两个下拉列表框只可以选择其中一个
如图我有两个下拉列表框：分类搜寻和系列搜寻，当我选择了”分类搜寻“下拉列表的值时，“系列搜寻”选中项任然为《所有货品系列》，当我选择“系列搜寻”下拉列表的值时“分类搜寻”选中项还原为《所有货品分类》，请高手帮帮忙~ 谢谢了！ 最好是能用jquery实现
<!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=gb2312" />
<title>无标题文档</title>
<script src="/js/jquery-1.4.4.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#types").change(function(){
$("#series").val("all");
});
$("#series").change(function(){
$("#types").val("all");
});
});
</script>
</head>
<body>
<div>分类搜寻
<select id="types" name="types">
<option value="all">所有货品分类</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
</select>
</div>
<div>系列搜寻
<select id="series" name="series">
<option value="all">所有货品系列</option>
<option value="1">系列1</option>
<option value="2">系列2</option>
</select>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="/js/jquery-1.4.4.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#types").change(function(){
$("#series").val("all");
});
$("#series").change(function(){
$("#types").val("all");
});
});
</script>
</head>
<body>
<div>分类搜寻
<select id="types" name="types">
<option value="all">所有货品分类</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
</select>
</div>
<div>系列搜寻
<select id="series" name="series">
<option value="all">所有货品系列</option>
<option value="1">系列1</option>
<option value="2">系列2</option>
</select>
</div>
</body>
</html>
温馨提示：内容为网友见解，仅供参考
第1个回答 2012-02-09
这个需求实现有给麻烦的地方，就是两个select的change会互相调用，所以我代码实现是在改变时先将对方的change事件解绑（unbind函数），然后在重置值后再绑定（bind函数）事件，下面是实现的代码，希望能帮到你
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//初始化绑定change事件
$('#categorySearch').bind('change', resetSerial);
$('#serialSearch').bind('change', resetCate);
})
function resetCate() {
$('#categorySearch').unbind(); //解绑
$('#categorySearch').find('option[value=0]').attr('selected', 'selected'); //重置分类select的值
$('#categorySearch').bind('change', resetSerial); //重新绑定
}
function resetSerial() {
$('#serialSearch').unbind();//解绑
$('#serialSearch').find('option[value=0]').attr('selected', 'selected');//重置系列select的值
$('#serialSearch').bind('change', resetCate);//重新绑定
}
</script>
</head>
<body>
分类搜索：
<select id="categorySearch">
<option value='0'>所有货品分类</option>
<option value='1'>货品分类1</option>
<option value='2'>货品分类2</option>
</select>
<br />
<br />
系列搜索：
<select id="serialSearch">
<option value='0'>所有货品系列</option>
<option value='1'>货品系列1</option>
<option value='2'>货品系列2</option>
</select>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//初始化绑定change事件
$('#categorySearch').bind('change', resetSerial);
$('#serialSearch').bind('change', resetCate);
})
function resetCate() {
$('#categorySearch').unbind(); //解绑
$('#categorySearch').find('option[value=0]').attr('selected', 'selected'); //重置分类select的值
$('#categorySearch').bind('change', resetSerial); //重新绑定
}
function resetSerial() {
$('#serialSearch').unbind();//解绑
$('#serialSearch').find('option[value=0]').attr('selected', 'selected');//重置系列select的值
$('#serialSearch').bind('change', resetCate);//重新绑定
}
</script>
</head>
<body>
分类搜索：
<select id="categorySearch">
<option value='0'>所有货品分类</option>
<option value='1'>货品分类1</option>
<option value='2'>货品分类2</option>
</select>
<br />
<br />
系列搜索：
<select id="serialSearch">
<option value='0'>所有货品系列</option>
<option value='1'>货品系列1</option>
<option value='2'>货品系列2</option>
</select>
</body>
</html>
相似回答
