下拉列表出现在指定页面上，但是当突出显示字段时，没有任何内容出现，当它位于 .html 文件内时，功能可以正常工作并且详细信息会切换。
确实需要一些帮助，并且非常感谢任何形式的见解。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<label for="programSelect"> Please choose a Programme<br><br></label>
<select id="nearestStore">
<option value="noSelection">Please Select</option>
<option value="StudyP">Study Programmes</option>
<option value="s2">Traineeships</option>
<option value="s3">Accountancy</option>
<option value="s4">Agricultural and Land Based</option>
<option value="s5">Animal Care</option>
<option value="s6">Beauty Therapy</option>
<option value="s7">Business Improvement Tech</option>
<option value="s8">Business Administration</option>
<option value="s9">Call Centres</option>
<option value="s10">Creative arts</option>
<option value="s11">Construction</option>
<option value="s12">Customer service</option>
<option value="s13">Cyber Security</option>
<option value="s14">Early years ChildCare & Education</option>
<option value="s15">ElectroTechnical</option>
<option value="s16">Engineering</option>
<option value="s17">Equine</option>
<option value="s18">Hairdressing Barbering</option>
<option value="s19">Horticulture</option>
<option value="s20">Health & Social Care</option>
<option value="s21">Hospitality & Catering</option>
<option value="s22">Information Technology</option>
<option value="s23">IT Software Development</option>
<option value="s24">Team Leading or Management</option>
<option value="s25">Manufacturing</option>
<option value="s26">Marketing</option>
<option value="s27">Motor vehicle maintenance</option>
<option value="s28">Motor Vehicle Body & Paint</option>
<option value="s29">Plumbing or Heating Vent</option>
<option value="s30">Retail & Distribution</option>
<option value="s31">Sales & Telesales</option>
<option value="s32">Social Media & Digital marketing</option>
<option value="s33">Sports & Recreation</option>
<option value="s34">Teaching assistants</option>
<option value="s35">Web Design</option>
<option value="s36">Warehousing</option>
</select>
<div id="phoneNumber"></div>
<script>
var nearestStore = document.getElementById("nearestStore"),
phoneNumber = document.getElementById("phoneNumber"),
contactdetails = {
noSelection: "",
StudyP: "<br><a href='http://www.howcollege.ac.uk'>Heart of Worcestershire College</a><br>Emily Leleu<br>01905 743587<br>eleleu@wortech.ac.uk<br><br><a href='http://www.warwickshire.ac.uk/colleges/henley-in-arden.aspx'>Henley in Arden College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>info@warkscol.ac.uk<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>kerry.davies@hittraining.co.uk<br><br><a href='http://www.kidderminster.ac.uk'>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>jshort@kidderminster.ac.uk<br><br><a href='http://www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>Nick.smith@novatraining.co.uk<br><br><a href='http://www.warwickshire.ac.uk/colleges/pershore_college.aspx'>Pershore College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>info@warkscol.ac.uk<br><br><a href='http://www.pathwaygroup.co.uk/'>The Pathway Group</a><br>Barry Knight<br>0121 707 0550<br>Barry@pathwaygroup.co.uk<br><br><a href='http://www.sworcs.ac.uk/'>South Worcestershire College</a><br>Donna Haris<br>01386 712722<br>dharris@evesham.ac.uk<br><br><a href='http://www.stokecollege.ac.uk/'>Stoke on Trent College</a><br>Jayne Griffiths<br>01562 732201 or 07786113867<br>jayne.griffiths@stokecoll.ac.uk<br><br><a href='http://www..co.uk/'>2 Counties Training</a><br>person<br>number",
s2: "<br>LMPQ",
s3: "",
s4: "",
s5: "",
s6: "",
s7: "",
s8: "",
s9: "",
s10: "",
s11: "",
s12: "",
s13: "",
s14: "",
s15: "",
s16: "",
s17: "",
s18: "",
s19: "",
s20: "",
s21: "",
s22: "",
s23: "",
s24: "",
s25: "",
s26: "",
s27: "",
s28: "",
s29: "",
s30: "",
s31: "",
s32: "",
s33: "",
s34: "",
s35: "",
s36: "",
}
nearestStore.onchange = function(){
phoneNumber.innerHTML = contactdetails[this.value];
//var previousString = contactdetails.StudyP; previousString = previousString.concat("<br><a href='http://www.warwickshire.ac.uk/colleges/henley-in-arden.aspx'>Henley in Arden College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>info@warkscol.ac.uk<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>kerry.davies@hittraining.co.uk<br><a href='www.kidderminster.ac.uk'><br>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>jshort@kidderminster.ac.uk<br><br><a href='www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>Nick.smith@novatraining.co.uk<br><br><a href='http://www.warwickshire.ac.uk/colleges/pershore_college.aspx'>Pershore College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>info@warkscol.ac.uk<br>"); phoneNumber.innerHTML = previousString;
//var previousString2 = contactdetails.s2; previousString2 = previousString2.concat("<br>Birmingham MET College"); phoneNumber.innerHTML = previousString2;
}
</script>
</body>
</html>
最佳答案
为了调试，我将代码分成 block 并检查每个部分是否按预期运行。在本例中，代码是
- 检测选择框更改
- 在数组中查找数据
- 在页面上显示数据
所以让我们先测试一下步骤 1...
<script>
nearestStore.onchange = function(){
alert('event fired');
}
</script>
此代码片段不起作用，当选择框更改时不会触发该事件。这很好 - 我们已经确定了问题并知道要搜索什么。解决办法就在this SO answer about change events not firing .
正确的代码是；
<script>
nearestStore.addEventListener('change', function(){
alert('event fired');
});
</script>
太棒了!现在将其回滚到原始代码和 everything works as expected 。如果事情仍然不稳定，我们也会单独测试步骤 2 和 3。将问题分解成更小的部分并单独调试它们是程序员最好的 friend 。
希望现在和将来有所帮助。
关于javascript - 尝试让此代码的功能在 WordPress 页面中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28900376/