我在下拉菜单中使用了一个 switch 语句
我想在每种情况下添加 html 代码,如链接、图像等。
index.html 中的标头标签
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer="defer">
function showDetails(){
var org = $("#org").attr("value");
var div1 = $("#div1");
switch(org)
{
case "1":
div1.html("this is all about organization 1");
break;
case "2":
div1.html("this is all about organization 2");
break;
case "3":
div1.html("this is all about organization 3");
break;
default:
div1.html("Select Organization");
}
$("#div2").fadeOut(300);
div1.fadeIn(300);
}
function TerritoryDetails(){
var terr = $("#terrSelect").attr("value");
var div = $("#div2");
div.fadeIn(300);
$("#div1").slideUp(300); //hide organization (optional)
switch(terr)
{
case "1":
div.html("this is all about Territory 2");
break;
case "2":
div.html("this is all about Territory 2");
break;
case "3":
div.html("this is all about Territory 3");
break;
case "4":
div.html("this is all about Territory 4");
break;
case "5":
div.html("this is all about Territory 5");
break;
case "6":
div.html("this is all about Territory 6");
break;
case "7":
div.html("this is all about Territory 7");
break;
default:
div.html("Select Territory");
}
}
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
orgSelect = cascadeForm.find('.orgSelect');
terrSelect = cascadeForm.find('.terrSelect');
locSelect = cascadeForm.find('.locSelect');
cascadeSelect(orgSelect, terrSelect);
cascadeSelect(terrSelect, locSelect);
});
</script>
完整的代码在这里
我缺乏 javascript 和 jQuery 的经验
提前致谢