HTML5 Выпадающий список со списком

im в настоящее время работает над обновлением веб-сайта. Iv взял код с одной из старых страниц и разместил его на новом веб-сайте. Он работает, но dosnt делает это, когда его проверяют w3c.HTML5 Выпадающий список со списком

Когда я пытаюсь проверить код, я получаю эту ошибку: Атрибут не разрешен для опции элемента на данный момент.

Новый сайт выполняется в HTML5.

Это их альтернативный способ сделать это с помощью HTML5?

В Iv включены некоторые изображения, чтобы показать, что должно произойти, и ссылку на страницу с исходным кодом.

Картинки показывает выпадающий

Figure 1 . Options in the drop down box

Это изображение показывает результат выбора Somthing

enter image description here

код можно увидеть здесь, если вы щелкните правой кнопкой мыши источник вида : enter link description here

источник

2013-08-02 Stefan Lazic

Хотя ответ ниже был хороший, он не работал в конце ,

JS Fiddle здесь - JS FIDDLE DEMO

Этот код тем не менее работы:

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

источник

2013-08-04 11:00:13

Прежде всего помните, что включать <!doctype html> в вашем файле, чтобы установить браузер в «режим стандартов html5»

Для тегов параметров, которые вы используете, следует использовать атрибут value. подобный

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

В вашем файле javascript вы можете получить доступ к этому атрибуту так же, как и к атрибуту rel.

Для дивы/цели вы должны использовать идентификатор или класс (или название), так как все эти глобальные атрибуты, которые могут быть assagned к любому объекту в html5 исх: http://www.w3schools.com/tags/ref_standardattributes.asp

использовать только «идентификатор», если объект однозначно идентифицируется на вашей странице, если вы хотите ссылаться на большее количество объектов одновременно, используйте «класс».

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

Надеется, что это помогает :-)

EDIT: почти полный код:

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 (я должен был удалить некоторые дивы в пределах 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 к Somthing как это ::

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

источник

2013-08-02 10:11:00

Такого рода помогает, для файла Java Script Что я меняющегося. Единственный файл javascrip - uf.js, но я действительно не знаю java-скрипта. Это материал со старого веб-сайта. –

Когда я делаю ваши изменения (минус javascript), страница работает доцент. Это из-за javascrip, правильно? –

Вы правы, javascript настроен на чтение атрибутов rel тегов '

HTML5 Выпадающий список со списком

ответ

Смежные вопросы