将html添加到switch语句中

时间:2012-12-24 14:02:20

标签: javascript jquery html html5 switch-statement

我在下拉菜单中使用了一个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>

完整的代码在这里

http://jsfiddle.net/5tmwg/5/

我缺乏javascript和jQuery的经验

提前致谢

1 个答案:

答案 0 :(得分:2)

你走在正确的道路上。

this is all about organization 1

您可以使用html代码替换这些字符串,例如

`div1.html("<p style='color:#0066cc'>this is all about organization 1<p>");`