HTML5 Drop down with list

Question 1

While the answer below was good , it didnt work in the end.

This code did however work:

<!DOCTYPE html>
<html>
<head>


  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var select = $( '#dropdown' );

function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}

select.change( function() {
  showTab( $( this ).val() );   
});

showTab( select.val() );
});//]]>  

</script>


</head>
<body>
   <form action="#">
                <p>
                <select id="dropdown" name="dropdown">
                    <option value="Pub-Chains" selected="selected"> Pub Chains </option>
                    <option value="Councils">Councils </option>
                    <option value="Property">Property </option>
                    <option value="Various">Various </option>
                    <option value="Universitys">Universitys </option>
                </select>
                </p>
            </form>


<div id="Pub-Chains">
Pub-Chains
</div>  

<div id="Councils">
Councils
</div>

<div id="Property">
Property
</div>

<div id="Various">
Various
</div>

</body>


</html>

Question 2

First of all remember to include <!doctype html> in your file to set the browser to "html5 standards mode"

For the options tags you haw should use the value attribute. like

<option value="acc">Accountants</option>

In your javascript file you can access this attribute in the same way as you access the rel attribute.

For the divs / the targets you should use id or class (or title) since these are all global attributes that can be assagned to any object in html5 ref: http://www.w3schools.com/tags/ref_standardattributes.asp

Only use 'id' if the object is uniquely identified on your page, if you want to reference more object at a time consider using 'class'.

<div class="acc"> <!-- or 'div id="acc"' -->
<ul>
<li><a href="http://www.balmeraccountancy.co.uk/" target="_blank">Balmer Accountancy</a></li>

<li><a href="http://www.birchcooper.com/" target="_blank">BirchCooper</a></li>
<li><a href="http://www.tearlecarver.co.uk/" target="_blank">Tearle &amp; Carver</a></li>
</ul>
</div>

Hope this helps :-)

EDIT: almost complete code:

JAVASCRIPT:

var containerTag = 'DIV';

var compatible = (
    document.getElementById && document.getElementsByTagName && document.createElement
    &&
    !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
    );

if (compatible)
{
    //console.log('compatible');
    document.write('<style>.accessibility{display: none}</style>');
    var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
    //console.log('prepareForm');
    if (!compatible) return;
    var marker = document.createElement(containerTag);
    marker.style.display = 'none';

    var x = document.getElementsByTagName('select');
    for (var i=0;i<x.length;i++)
        addEvent(x[i],'change',showHideFields)

    var x = document.getElementsByTagName(containerTag);        //divs

    var hiddenFields = new Array;
    for (var i=0;i<x.length;i++)
    {
        if (x[i].getAttribute('class'))             //edit: class or id
        {

            var y = getAllFormFields(x[i]);
            x[i].nestedRels = new Array();
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('class');   //edit: class or id
                if (!rel || rel == 'none') continue;
                x[i].nestedRels.push(rel);
            }
            if (!x[i].nestedRels.length) x[i].nestedRels = null;
            hiddenFields.push(x[i]);
        }
    }

    while (hiddenFields.length)
    {
        var rel = hiddenFields[0].getAttribute('class');        //edit: class or id
        if (!hiddenFormFieldsPointers[rel])
            hiddenFormFieldsPointers[rel] = new Array();
        var relIndex = hiddenFormFieldsPointers[rel].length;
        hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
        var newMarker = marker.cloneNode(true);
        newMarker.id = rel + relIndex;
        hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
        waitingRoom.appendChild(hiddenFields.shift());
    }

    setDefaults();
    addEvent(document,'click',showHideFields);
}

function setDefaults()
{
    //console.log('setDefaults');
    var y = document.getElementsByTagName('input');
    for (var i=0;i<y.length;i++)
    {
        if (y[i].checked && y[i].getAttribute('value'))         //edit: value
            intoMainForm(y[i].getAttribute('value'))        //edit: value
    }

    var z = document.getElementsByTagName('select');
    for (var i=0;i<z.length;i++)
    {
        if (z[i].options[z[i].selectedIndex].getAttribute('value'))         //edit: value
            intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('value'))    //edit: value
    }

}

function showHideFields(e)
{
    //console.log('showHideFields');
    if (typeof e == "undefined")
        e = window.event;
    var tg = e.target || e.srcElement;

    if (tg.nodeName == 'LABEL')
    {
        var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
        tg = document.getElementById(relatedFieldName);
    }

    if (
        !(tg.nodeName == 'SELECT' && e.type == 'change')
        &&
        !(tg.nodeName == 'INPUT' && tg.getAttribute('value'))           //edit: value
       ) return;

    var fieldsToBeInserted = tg.getAttribute('value');              //edit: value

    if (tg.type == 'checkbox')
    {
        if (tg.checked)
            intoMainForm(fieldsToBeInserted);
        else
            intoWaitingRoom(fieldsToBeInserted);
    }
    else if (tg.type == 'radio')
    {
        removeOthers(tg.form[tg.name],fieldsToBeInserted)
        intoMainForm(fieldsToBeInserted);
    }
    else if (tg.type == 'select-one')
    {
        fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('value'); //edit: value
        removeOthers(tg.options,fieldsToBeInserted);
        intoMainForm(fieldsToBeInserted);
    }
}

function removeOthers(others,fieldsToBeInserted)
{
    //console.log('removeOthers');
    for (var i=0;i<others.length;i++)
    {
        var show = others[i].getAttribute('value');     //edit: value
        if (show == fieldsToBeInserted) continue;
        intoWaitingRoom(show);
    }
}

function intoWaitingRoom(relation)
{
    //console.log('intoWaitingRoom');
    if (relation == 'none') return;
    var Elements = hiddenFormFieldsPointers[relation];
    for (var i=0;i<Elements.length;i++)
    {
        waitingRoom.appendChild(Elements[i]);
        if (Elements[i].nestedRels)
            for (var j=0;j<Elements[i].nestedRels.length;j++)
                intoWaitingRoom(Elements[i].nestedRels[j]);
    }
}

function intoMainForm(relation)
{
    //console.log('intoMainForm');
    if (relation == 'none') return;
    var Elements = hiddenFormFieldsPointers[relation];
    for (var i=0;i<Elements.length;i++)
    {
        var insertPoint = document.getElementById(relation+i);
        insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
        if (Elements[i].nestedRels)
        {
            var fields = getAllFormFields(Elements[i]);
            for (var j=0;j<fields.length;j++)
            {
                if (!fields[j].getAttribute('value')) continue;     //edit: value
                if (fields[j].checked || fields[j].selected) 
                    intoMainForm(fields[j].getAttribute('value'));  //edit: value
            }
        }
    }
}

function getAllFormFields(node)
{
    var allFormFields = new Array;
    var x = node.getElementsByTagName('input');
    for (var i=0;i<x.length;i++)
        allFormFields.push(x[i]);
    var y = node.getElementsByTagName('option');
    for (var i=0;i<y.length;i++)
        allFormFields.push(y[i]);
    return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
    if (obj.addEventListener)
        obj.addEventListener(type,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);


/** PUSH AND SHIFT FOR IE5 **/

function Array_push() {
    var A_p = 0
    for (A_p = 0; A_p < arguments.length; A_p++) {
        this[this.length] = arguments[A_p]
    }
    return this.length
}

if (typeof Array.prototype.push == "undefined") {
    Array.prototype.push = Array_push
}

function Array_shift() {
    var A_s = 0
    var response = this[0]
    for (A_s = 0; A_s < this.length-1; A_s++) {
        this[A_s] = this[A_s + 1]
    }
    this.length--
    return response
}

if (typeof Array.prototype.shift == "undefined") {
    Array.prototype.shift = Array_shift
}

HTML (I HAD TO REMOVE SOME DIVS TO BE WITHIN stackoverflow.com POSTING LIMIT!!):

<!DOCTYPE html>
<title>Stackoverflow Code Sample</title>

<link type="text/css" rel="StyleSheet" href="./Stackoverflow_files/mk18.css">

<script type="text/javascript" src="./Stackoverflow_files/uf.js"></script>




</head>

<body class="twoColFixLtHdr">


<div id="container">
  <div id="mainContent">
    <h1 class="twoColFixLtHdr"><img width="480" height="29" src="http://mk18.comoj.com/Stackoverflow_files/weblinks.jpg" alt=""></h1>
<p></p>
<p>While advertising in MK18 we offer your company a free weblink. Select your choice by clicking the drop down and clicking the link to open.</p>
<form>
    <select>
 <option value="select">--- Click the drop down to select a weblink ---</option>
 <option value="acc">Accountants</option>
 <option value="acu">Acupuncture</option>
 <option value="adv">Advertising</option>
 <!-- //<option rel="aggt">Aggregates &amp; Topsoil</option>// --> 
 <option value="ant">Antiques</option>
 <option value="arcs">Architects &amp; Surveyors</option>

 <option value="artl">Artificial Lawns</option>
 <!-- //<option rel="artf">Art &amp; Framing</option>// --> 
 <option value="auc">Auctioneers</option>
 <option value="auts">Automotive Services</option>
 <option value="bat">Bathrooms</option>
 <option value="bea">Beauticians</option>
 <option value="boak">Boarding Kennels</option>
 <option value="bui">Builders</option>
 <option value="busn">Business Networking</option>
 <!-- //<option rel="buso">Business Opportunities</option>// --> 
 <option value="but">Butchers</option>
 <option value="carh">Car Hire</option>

 <option value="carho">Care Home</option>
 <option value="carj">Carpentry &amp; Joiners</option>

 <option value="carf">Carpets &amp; Flooring</option>

 <option value="cats">Catering Services</option>
 <!-- //<option rel="cars">Car Sales</option>// -->
 <option value="chas">Chauffeur Services</option>
 <option value="chis">Chimney Sweep</option>

 <option value="chir">Chiropractor</option>
 <!-- //<option rel="choc">Chocolatier</option>// -->
 <option value="cles">Cleaning Services</option>
 <option value="clor">Clothing Repairs &amp; Alterations</option>
 <option value="coms">Computer Services</option>
 <option value="corc">Corporate Clothing</option>
  <!-- //<option rel="cou">Counselling</option>// -->
 <option value="cra">Craftshop</option>
 <option value="curb">Curtains &amp; Blinds</option>
 <option value="cycs">Cycle Sales &amp; Repairs</option>
 <option value="deli">Delicatessen</option>
 <option value="denp">Dental Practice</option>
 <option value="dogg">Dog Grooming</option>
 <option value="dogt">Dog Trainer</option>
 <option value="dogw">Dog Walking &amp; Pet Sitting</option>

 <option value="dcw">Doors, Conservatories &amp; Windows</option>
 <option value="edut">Education</option>
  <!-- //<option rel="ele">Electricians</option>// -->
 <option value="estl">Estate Agents</option>
 <option value="eveh">Event Hire</option>

 <option value="fars">Farm Shop</option>
 <option value="fen">Fencing</option>
 <option value="finm">Financial &amp; Mortgage Services</option>
 <option value="fooh">Foot Health</option>
 <option value="fur">Furniture</option>
 <option value="garn">Garden Nursery</option>
  <!-- //<option rel="gars">Garden Sheds</option>// -->
 <option value="gla">Glazier</option>
 <option value="hai">Hairdresser</option>
 <option value="heaf">Health &amp; Fitness</option>
  <!-- //<option rel="hola">Holiday Apartments</option>// -->
 <option value="holh">Holistic Health</option>
 <option value="hyp">Hypnotherapy</option>
 <!-- //<option rel="inds">Independent Schools</option>// -->
 <!-- //<option rel="iros">Ironing Services</option>// -->
 <option value="kit">Kitchens</option>
 <option value="lang">Landscaping &amp; Gardening</option>
 <!-- //<option rel="lawt">Lawn Treatment</option>// -->
 <option value="lei">Leisure</option>

 <option value="let">Letting Agencies</option>
 <!-- //<option rel="lifc">Life Coach</option>// -->
 <option value="loce">Local Events &amp; Information</option>
 <option value="marh">Marquee Hire</option>
 <!-- //<option rel="nurs">Nursery Schools</option>// -->
 <option value="off">Office Services</option>

 <!-- //<option rel="oilt">Oil Tanks</option>// -->
 <option value="opt">Opticians</option>
 <option value="ost">Osteopath</option>
 <option value="paid">Painting &amp; Decorating</option>
 <option value="pesc">Pest Control</option>
 <option value="pluh">Plumbing &amp; Heating</option>
  <option value="prom">Property Maintenance</option>
 <!-- //<option rel="pros">Property Surveyor</option>// -->
 <option value="rec">Recruitment</option>
  <!-- //<option rel="recs">Record Shop</option>// -->
 <option value="res">Restaurants</option>
 <option value="roos">Roofing Services</option>
<!-- //<option rel="salm">Sales &amp; Marketing</option>// -->
 <option value="sol">Solicitors</option>
 <!-- //<option rel="sole">Solar Energy</option>// -->
 <option value="sty">Stylist</option>
 <!-- //<option rel="telb">Telephone &amp; Broadband</option>// -->
 <option value="tres">Tree Surgery</option>
 <option value="tvsa">TV Services &amp; Aerials</option>
 <option value="tyrs">Tyre Services</option>
  <!-- //<option rel="uph">Upholstery</option>// -->
 <option value="vet">Vets</option>
 <option value="vida">Video &amp; Audio Services</option>
 <option value="webd">Web Design</option>
 <option value="wilw">Will Writer</option>
    </select>
</form>
<div class="select">    
</div>
<div class="acc">
<ul>
<li><a href="http://www.balmeraccountancy.co.uk/" target="_blank">Balmer Accountancy</a></li>

<li><a href="http://www.birchcooper.com/" target="_blank">BirchCooper</a></li>
<li><a href="http://www.tearlecarver.co.uk/" target="_blank">Tearle &amp; Carver</a></li>
</ul>
</div>
<div class="acu">
<ul>
<li><a href="http://www.joannesewell.co.uk/" target="_blank">Dr Joanne Sewell</a></li>
</ul>
</div>
<div class="adv">
<ul>
<li><a href="http://www.thebestof.co.uk/buckingham" target="_blank">Best of Buckingham</a></li>
<li><a href="http://www.essentiallylocal.co.uk/" target="_blank">Essentially Local</a></li>
<li><a href="http://www.hogstyend.co.uk/" target="_blank">Hogsty End</a></li>
<li><a href="http://www.roundabouthere.co.uk/" target="_blank">Roundabout Here</a></li>
</ul>
</div>
<div class="aggt">
<ul>
</ul>
</div>
<div class="ant">
<ul>
<li><a href="http://www.adstockantiques.co.uk/" target="_blank">Adstock Antiques</a></li>
</ul>
</div>
<div class="arcs">
<ul>
<li><a href="http://www.ap-architect.com/" target="_blank">Andrew Pegley</a></li>
<li><a href="http://www.georgesurveys.co.uk/" target="_blank">George Surveys Ltd</a></li>
</ul>
</div>
<div class="artf">
<ul>
<li><a href="http://www.theframing-centre.co.uk/" target="_blank">The Framing Centre</a></li>
</ul>
</div>

<div class="artl">

<ul>

<li><a href="http://www.prestige-lawns.co.uk/" target="_blank">Prestige Lawns</a></li>

</ul>

</div>
<div class="auc">
<ul>
<li><a href="http://www.dickinsauctioneers.com/" target="_blank">Dickens Auctioneers</a></li>
</ul>
</div>
<div class="auts">
<ul>
<li><a href="http://www.chipsaway.co.uk/" target="_blank">ChipsAway</a></li>
<li><a href="http://www.spotoncolours.co.uk/" target="_blank">Spot on Colours</a></li>

<li><a href="http://www.vass-tech.co.uk/" target="_blank">Vass-Tech</a></li>
</ul>
</div>
<div class="bat">
<ul>
<li><a href="http://www.aspirationalinteriors.co.uk/" target="_blank">Aspirational Interiors</a></li>
<li><a href="http://www.hatschek.co.uk/" target="_blank">Hatschek</a></li>
<li><a href="http://www.moretonbathroomsandkitchens.co.uk/" target="_blank">Moreton Bathrooms</a></li>
</ul>
</div>
<div class="bea">
<ul>
<li><a href="http://www.harmonybeautytherapy.co.uk/" target="_blank">Harmony Beauty Therapy</a></li>
<li><a href="http://www.taylormadetreatments.co.uk/" target="_blank">Taylor Made Treatments</a></li>
<li><a href="http://www.thebeautyboxbuckingham.co.uk/" target="_blank">The Beauty Box</a></li>
<li><a href="http://www.thebeautytherapycentre.co.uk/ "target="_blank">The Beauty Therapy Centre</a></li>
</ul>
</div>
<div class="boak">
<ul>

<li><a href="http://www.cayla.co.uk/" target="_blank">Cayla Country Club</a></li>
</ul>
</div>
<div class="bui">
<ul>  
<li><a href="http://www.listed-buildings.com/" target="_blank">Country Renovations</a></li>

<li><a href="http://www.homefixbms.webeden.co.uk/" target="_blank">Homefix</a></li>
</ul>
</div>
<div class="busn">
<ul>
<li><a href="http://www.bucks-fizz.biz/" target="_blank">Bucks Fizz</a></li>
<li><a href="http://www.theathenanetwork.co.uk/lauracarrick" target="_blank">The Athena Network</a></li>
</ul>
</div>
<div class="buso">
<ul>
</ul>
</div>
<div class="but">
<ul>
<li><a href="http://www.padburymeats.co.uk/" target="_blank">Padbury Meats</a></li>
</ul>
</div>
<div class="carf">
<ul>
<li><a href="http://www.chemdrymiltonkeynes.co.uk/" target="_blank">ChemDry</a></li>  
<li><a href="http://www.mjharrisflooring.co.uk/" target="_blank">M J Harris Flooring</a></li> 
<li><a href="http://www.stainbusters.co.uk/" target="_blank">Stainbusters</a></li>
</ul>
</div>
<div class="carh">
<ul>
<li><a href="http://www.twoheartsweddingcars.co.uk/" target="_blank">Two Hearts Wedding Car Hire</a></li>
</ul>
</div>


</div>
<!--end of list -->                         <br>
        <div id="footer-spacer"></div>
<!-- end #mainContent -->
</div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat">

        <!-- end #footer -->

 </body></html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

There might be some errors so do tests!!

Good luck :-)

UPDATED::

Change your function prepareForm to somthing like this::

function prepareForm()
{
    //console.log('prepareForm');
    if (!compatible) return;
    var marker = document.createElement(containerTag);
    marker.style.display = 'none';

    var x = document.getElementsByTagName('select');
    for (var i=0;i<x.length;i++)
        addEvent(x[i],'change',showHideFields)

    var should_hide = new Array;

    for (var i = 0; i < x.length; i++) {
        for (var j = 0; j < x[i].length; j++) {
            should_hide.push(x[i][j].getAttribute('value'));
        }
    }

    var x = document.getElementsByTagName(containerTag);        //divs


    //console.log(should_hide);


    var hiddenFields = new Array;
    for (var i=0;i<x.length;i++)
    {
        var classname = x[i].getAttribute('class');
        //if (x[i].getAttribute('class'))           //edit: class or id
        if (classname && should_hide.indexOf(classname) != -1)
        {

            var y = getAllFormFields(x[i]);
            x[i].nestedRels = new Array();
            for (var j=0;j<y.length;j++)
            {
                var rel = y[j].getAttribute('class');   //edit: class or id
                if (!rel || rel == 'none') continue;
                x[i].nestedRels.push(rel);
            }
            if (!x[i].nestedRels.length) x[i].nestedRels = null;
            hiddenFields.push(x[i]);
        }
    }

    while (hiddenFields.length)
    {
        var rel = hiddenFields[0].getAttribute('class');        //edit: class or id
        if (!hiddenFormFieldsPointers[rel])
            hiddenFormFieldsPointers[rel] = new Array();
        var relIndex = hiddenFormFieldsPointers[rel].length;
        hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
        var newMarker = marker.cloneNode(true);
        newMarker.id = rel + relIndex;
        hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
        waitingRoom.appendChild(hiddenFields.shift());
    }

    setDefaults();
    addEvent(document,'click',showHideFields);
}