Javascript 选择更改显示div时的下拉列表

我有一个select/options下拉列表，当用户更改选项时，会有一个p标签，里面有一个描述，应该显示出来。不应显示未选定选项的所有说明。为运行函数而编写的Javascript确实可以工作，但我认为它编写得既不正确也不高效

我的选择/选项表单是由WordPress联系人表单7插件生成的。在某些浏览器中选择表单的“提交”按钮后，将正确提交。在其他浏览器中则不然。我被告知它不会在Chrome33.0.1750.146和IE8中提交。Firefox也有一个问题，尽管我不确定是哪个版本。当我删除Javascript时，表单在所有浏览器中都可以正常工作。我也尝试过从WordPress插件中删除表单，然后手工编写并用PHP进行处理。这个选项也没有正确提交，这让我相信问题出在我糟糕的Javascript上

我不太懂Javascript或Jquery，所以这里是我的代码，如果有人能帮忙，我将不胜感激

function servicechangeinfo(){
var servicesonchange = document.getElementById('servicesonchange');
servicesonchange.onchange = changeHandler;
function changeHandler(){
    var servicesonchange = document.getElementById('servicesonchange');
    if(servicesonchange.value === "Pest Inspection") {
        PestInspection.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        PestInspection.style.display = 'none';
    }
    if(servicesonchange.value === "Economy Plus Package") {
        EconomyPlusPackage.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        EconomyPlusPackage.style.display = 'none';
    }
    if(servicesonchange.value === "Economy Package") {
        EconomyPackage.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        EconomyPackage.style.display = 'none';
    }
    if(servicesonchange.value === "Gas Line Leak Test") {
        GasLineLeakTest.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        GasLineLeakTest.style.display = 'none';
    }
    if(servicesonchange.value === "Ultimate Saver Package") {
        UltimateSaverPackage.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        UltimateSaverPackage.style.display = 'none';
    }
    if(servicesonchange.value === "Super Saver Package") {
        SuperSaverPackage.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        SuperSaverPackage.style.display = 'none';
    }
    if(servicesonchange.value === "Home Inspection") {
        homeinspection.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        homeinspection.style.display = 'none';
    }
    if(servicesonchange.value === "Radon Testing") {
        RadonTesting.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        RadonTesting.style.display = 'none';
    }
    if(servicesonchange.value === "Septic Inspection") {
        SepticInspection.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        SepticInspection.style.display = 'none';
    }
    if(servicesonchange.value === "Total Coliform Bacteria Analysis") {
        TotalColiformBacteriaAnalysis.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        TotalColiformBacteriaAnalysis.style.display = 'none';
    }
    if(servicesonchange.value === "FHA Water Series Analysis") {
        FHAWaterSeriesAnalysis.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        FHAWaterSeriesAnalysis.style.display = 'none';
    }
    if(servicesonchange.value === "VA Water Series Analysis") {
        VAWaterSeriesAnalysis.style.display = 'block';
        placeholder.style.display = 'none';
    } else {
        VAWaterSeriesAnalysis.style.display = 'none';
    }
}
}
window.onload = servicechangeinfo;



            <select id="servicesonchange" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">

    <option value="">---</option><option value="Super Saver Package">Super Saver Package</option>
    <option value="Ultimate Saver Package">Ultimate Saver Package</option>
    <option value="Economy Plus Package">Economy Plus Package</option>
    <option value="Economy Package">Economy Package</option>
    <option value="Home Inspection">Home Inspection</option>
    <option value="Pest Inspection">Pest Inspection</option>
    <option value="Radon Testing">Radon Testing</option>
    <option value="Septic Inspection">Septic Inspection</option>
    <option value="Total Coliform Bacteria Analysis">Total Coliform Bacteria Analysis</option>
    <option value="FHA Water Series Analysis">FHA Water Series Analysis</option>
    <option value="VA Water Series Analysis">VA Water Series Analysis</option>
    <option value="Gas Line Leak Test">Gas Line Leak Test</option>

    </select>



            <p id="placeholder"></p>
    <p id="homeinspection"></p>
    <p id="RadonTesting"></p>
    <p id="SepticInspection"></p>
    <p id="TotalColiformBacteriaAnalysis"></p>
    <p id="FHAWaterSeriesAnalysis"></p>
    <p id="VAWaterSeriesAnalysis"></p>
    <p id="GasLineLeakTest"></p>
    <p id="UltimateSaverPackage"></p>
    <p id="SuperSaverPackage"></p>
    <p id="EconomyPlusPackage"></p>
    <p id="EconomyPackage"></p>
    <p id="PestInspection"></p>

函数servicechangeinfo（）{
var servicesonchange=document.getElementById（'servicesonchange'）；
servicesonchange.onchange=changeHandler；
函数changeHandler（）{
var servicesonchange=document.getElementById（'servicesonchange'）；
如果（servicesonchange.value==“有害生物检查”）{
PestInspection.style.display='block'；
placeholder.style.display='none'；
}否则{
PestInspection.style.display='none'；
}
如果（servicesonchange.value==“经济型套餐”）{
EconomyPlusPackage.style.display='block'；
placeholder.style.display='none'；
}否则{
EconomyPlusPackage.style.display='none'；
}
如果（servicesonchange.value==“经济套餐”）{
EconomyPackage.style.display='block'；
placeholder.style.display='none'；
}否则{
EconomyPackage.style.display='none'；
}
如果（servicesonchange.value==“气体管线泄漏测试”）{
GasLineLeakTest.style.display='block'；
placeholder.style.display='none'；
}否则{
GasLineLeakTest.style.display='none'；
}
if（servicesonchange.value==“终极保护包”）{
UltimateSaverPackage.style.display='block'；
placeholder.style.display='none'；
}否则{
UltimateSaverPackage.style.display='none'；
}
如果（servicesonchange.value==“超级保护程序包”）{
supersavepackage.style.display='block'；
placeholder.style.display='none'；
}否则{
supersavepackage.style.display='none'；
}
if（servicesonchange.value==“上门检查”）{
homeinspection.style.display='block'；
placeholder.style.display='none'；
}否则{
homeinspection.style.display='none'；
}
如果（servicesonchange.value==“氡测试”）{
RadonTesting.style.display='block'；
placeholder.style.display='none'；
}否则{
RadonTesting.style.display='none'；
}
如果（servicesonchange.value==“化粪池检查”）{
display.style.display='block'；
placeholder.style.display='none'；
}否则{
display.style.display='none'；
}
如果（servicesonchange.value==“总大肠菌群分析”）{
totalcoliformbacterianalysis.style.display='block'；
placeholder.style.display='none'；
}否则{
TotalColiformBacteriaAnalysis.style.display='none'；
}
if（servicesonchange.value==“FHA水系列分析”）{
FHAWaterSeriesAnalysis.style.display='block'；
placeholder.style.display='none'；
}否则{
FHAWaterSeriesAnalysis.style.display='none'；
}
if（servicesonchange.value==“VA水系列分析”）{
VAWaterSeriesAnalysis.style.display='block'；
placeholder.style.display='none'；
}否则{
VAWaterSeriesAnalysis.style.display='none'；
}
}
}
window.onload=服务变更信息；
---超级节省包
终极节省包
经济+套餐
经济套餐
家访
害虫检查
氡测试
化粪池检查
总大肠菌群分析
FHA水族分析
VA水族分析
气体管线泄漏试验

这个简化版怎么样

HTML

<select id="servicesonchange" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">
<option value="">---</option><option value="Super Saver Package">Super Saver Package</option>
<option value="Ultimate Saver Package">Ultimate Saver Package</option>
<option value="Economy Plus Package">Economy Plus Package</option>
<option value="Economy Package">Economy Package</option>
<option value="Home Inspection">Home Inspection</option>
<option value="Pest Inspection">Pest Inspection</option>
<option value="Radon Testing">Radon Testing</option>
<option value="Septic Inspection">Septic Inspection</option>
<option value="Total Coliform Bacteria Analysis">Total Coliform Bacteria Analysis</option>
<option value="FHA Water Series Analysis">FHA Water Series Analysis</option>
<option value="VA Water Series Analysis">VA Water Series Analysis</option>
<option value="Gas Line Leak Test">Gas Line Leak Test</option>
</select>


<p id="HomeInspection">home inspection 1</p>
<p id="RadonTesting">Radon Testing</p>
<p id="SepticInspection">Septic Inspection</p>
<p id="TotalColiformBacteriaAnalysis">Total Coliform Bacteria Analysis</p>
<p id="FHAWaterSeriesAnalysis">FHA Water Series Analysis</p>
<p id="VAWaterSeriesAnalysis">VA Wate rSeries Analysis</p>
<p id="GasLineLeakTest">GasLine Leak Test</p>
<p id="UltimateSaverPackage">Ultimate Saver Package</p>
<p id="SuperSaverPackage">Super Saver Package</p>
<p id="EconomyPlusPackage">Economy Plus Package</p>
<p id="EconomyPackage">Economy Package</p>
<p id="PestInspection">Pest Inspection </p>

---

好吧，我注意到在你的javascript代码中，你是

分配

var servicesonchange = document.getElementById('servicesonchange');

你对你的p标签也不一样

因为根据您的代码，您正在为未定义的对象指定样式

i、 e。 PestInspection.style.display='block'

Should really be something like:

var _pestInspection = document.getElementById('pestInspection');
_pestInspection.style.Display = "block";

还注意到window.onload=servicechangeinfo； 这意味着您正在页面加载上运行代码，因此这可能是它被忽略的另一个原因。您可能需要将OnClick事件添加到dropdownlist

<select id="servicesonchange" onClick="servicechangeinfo()" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">

它将执行您的代码

我建议您使用Google Chrome开发工具，因为这将允许您使用控制台观察是否存在任何javascript错误，并且您还可以调试代码

Sico已经提出了一个JQuery解决方案（这很好），但我认为您需要首先调试代码（理解它），如果您没有显示错误，那么可能会提供更多信息，例如什么是占位符，因为您没有为它分配元素，或者除了您之外的任何信息

<select id="servicesonchange" onClick="servicechangeinfo()" class="wpcf7-form-control wpcf7-select margintop20" aria-invalid="false" name="Services">