选择下拉菜单onchange show div

Question

我有一个选择/选项下拉菜单，当用户更改选项时，应该在里面显示一个带有说明的ap标记。 未选择的选项的所有说明都不应显示。 为运行该功能而编写的Javascript确实有效，但我认为它编写得并不正确或效率很高。

我放置选择/选项的表格是由WordPress Contact Form 7插件生成的。 在某些浏览器中选择了表单的“提交”按钮后，即可正确提交。 在其他浏览器中则没有。 有人告诉我它不在Chrome 33.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>

Answer 1

这个简化版怎么样

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

jQuery查询

//hide all p's (better in css)
$('p').hide();

//when dropdown changes
$('#servicesonchange').on('change', function(){
    //get a reference to this
    $this = $(this);
    //hide all the exposed p's
    $('p').hide();
    //put the select text in the placeholder p
    $('#placeholder').show().text($this.val());
    //replace all spaces in the dropdown value and show the element that matches
    $('#' + $this.val().replace(/ /gi, '')).show();
});

Answer 2

好吧，我在您的JavaScript代码中注意到了

分配

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

而且您对P标签的操作也不尽相同。

因为根据您的代码，您正在将样式分配给未定义的对象。

即PestInspection.style.display ='block';

Should really be something like:

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

还注意到window.onload = servicechangeinfo; 这意味着您正在页面加载时运行代码，这可能是导致代码被忽略的另一个原因。 您可能需要通过将OnClick事件添加到下拉列表中来执行此操作。

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

这将执行您的代码。

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

Sico建议了一种JQuery解决方案（很好），但是我认为您需要先调试代码（理解它），如果未显示错误，则可能会提供更多信息，例如，占位符是什么？没有为其分配元素，或其他任何东西，但您尝试为其分配CSS样式。

希望这可以帮助您指出正确的方向。 享受编码！

库什