我在下拉菜单中使用了一个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的经验
提前致谢
答案 0 :(得分:2)
你走在正确的道路上。
this is all about organization 1
您可以使用html
代码替换这些字符串,例如
`div1.html("<p style='color:#0066cc'>this is all about organization 1<p>");`