javascript - HTML5 下拉列表

Question

我目前正在努力更新一个网站。我从其中一个旧页面中获取代码并将其放入新网站。它可以工作，但是当它被 w3c 验证时不会这样做。

当我尝试验证代码时，出现此错误：此时元素选项上不允许使用属性 rel。

新网站正在 HTML5 中完成。

他们是用 HTML5 做这件事的另一种方法吗？

Iv 包含了一些图像来显示应该发生的事情以及指向带有原始代码的页面的链接。

此图像显示下拉框

图1 。下拉框中的选项

此图显示选择 somthing 的结果

在此处输入图像描述

如果您右键单击查看源代码，可以在此处看到代码：在此处输入链接描述

score 1 · Accepted Answer

虽然下面的答案很好，但最终没有奏效。

JS Fiddle here - JS FIDDLE 演示

但是，此代码确实有效：

<!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>

score 0 · Accepted Answer

首先记得<!doctype html>在你的文件中包含将浏览器设置为“html5标准模式”

对于选项标签，您应该使用 value 属性。喜欢

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

在您的 javascript 文件中，您可以像访问 rel 属性一样访问此属性。

对于 div / 目标，您应该使用 id 或 class（或标题），因为这些都是全局属性，可以分配给 html5 参考中的任何对象：http: //www.w3schools.com/tags/ref_standardattributes.asp

仅当对象在您的页面上被唯一标识时才使用“id”，如果您想一次引用更多对象，请考虑使用“类”。

<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>

希望这可以帮助：-）

编辑：几乎完整的代码：

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（我必须删除一些 DIVS 才能在 stackoverflow.com 发布限制内！！）：

<!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 -->

可能会有一些错误，所以测试！

祝你好运：-）

更新：：

将您的函数 prepareForm 更改为如下所示::

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);
}

javascript - HTML5 下拉列表

2 回答 2

Related

Reference