Question

我有一个选择/选项下拉列表，当用户更改选项时，会有一个带有描述的p标记应该显示。不应显示未选择的选项的所有描述。为运行该函数而编写的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样式。

希望这有助于指明您正确的方向。享受编码！

库什

选择下拉onchange show div

2 个答案: