Question

I have a switch statement that I am using in the drop down menus

I want to add html code in each of the cases like links,images, etc..

the header tag in the 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>

the full code is here

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

I lack experience in javascript and jQuery

thanks in advance

Answer 1

you are on the right path.

this is all about organization 1

you can replace those strings with html code for example

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