下拉框经常会遇见联动效果，即选择前边下拉框的内容，后边下拉框显示出来的都是和前边下拉框相关的内容，例如城市选择，前边选择城市，后边下拉框出现的都是这个城市相关的区域，当然这种联动的效果也有相关插件，这是自己实现的代码
-
<!doctype html>
-
<html>
-
<head>
-
<script src=""></script>
-
-
</head>
-
<body>
-
<select id="client">
-
<option>所有客户</option>
-
<option>合生</option>
-
<option>八达岭孔雀城</option>
-
<option>建投御湖园</option>
-
<option>世界侨商中心</option>
-
<option>众美MIMO公馆</option>
-
</select>
-
<select name="item" id="item" style="padding-top:3px;padding-bottom:7px;height:33px;">
-
<option value="">所有项目</option>
-
<option value="建投御湖园">[建投御湖园]建投御湖园</option>
-
<option value="八达岭孔雀城">[八达岭孔雀城]八达岭孔雀城</option>
-
<option value="世界侨商中心">[世界侨商中心]世界侨商中心</option>
-
<option value="京津新城">[合生]京津新城</option>
-
<option value="合生广场">[合生]合生广场</option>
-
<option value="华北御龙城">[合生]华北御龙城</option>
-
<option value="天津君景湾">[合生]天津君景湾</option>
-
<option value="合生滨江帝景">[合生]合生滨江帝景</option>
-
<option value="麒麟公馆">[合生]麒麟公馆</option>
-
<option value="众美mimo">[众美MIMO公馆]众美mimo</option>
-
</select>
-
</body>
-
<script>
-
/* 客户与项目的级联选择 */
-
$("#client").change(function(){
-
var client_text = $("#client").find("option:selected").text();
-
-
// 显示所有选项
-
$("#item").children("span").each(function(){
-
$(this).children().clone().replaceAll($(this)); //use the content of the <span> replace the <span>
-
});
-
// 隐藏无关的选项
-
$("#item option").each(function() {
-
var opt_txt = $(this).text();
-
if((opt_txt.indexOf(client_text) == 1) || (opt_txt == "所有项目") ){
-
} else {
-
$(this).wrap("");
-
}
-
});
-
});
-
-
</script>
-
</html>
阅读(1133) | 评论(0) | 转发(0) |
