选择下拉菜单onchange show div

Question

I have a select/options dropdown and when a user changes the option, there is ap tag with a description inside that is supposed to show. All descriptions of options that are not selected should not show. The Javascript written to run the function does work but I do not believe it is written properly nor efficiently.

The form I have the select/options placed in is generated by the WordPress Contact Form 7 plugin. When the form's submit button is selected in some browsers, submits properly. In other browsers it does not. I've been told it does not submit in Chrome 33.0.1750.146 and IE8. Firefox also had a problem although I'm not sure which version. When I remove the Javascript, the form functions just fine in all browsers. I've also tried removing the form from the WordPress plugin and writing it by hand and processing it with PHP. This option didn't submit properly either leading me to believe the problem is with my crappy Javascript.

I do not know Javascript or Jquery very well so here's my code and if anyone could help, I would appreciate it!!

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

How about this simplified version

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

Okay i noticed in your javascript code, you are

assigning

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

and you are not doing the same for you P tags.

Because according to your code you are assigning style to an undefined object.

ie PestInspection.style.display = 'block';

Should really be something like:

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

Also noticed window.onload = servicechangeinfo; which means you are running your code on page load, so that can be another reason why it is ignored. You may have to do it by add OnClick event to the dropdownlist.

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

which will execute your code.

I would advise you to use Google Chrome Dev tools as this will allow you to observe using the console, if there are any javascript errors, and you will also be able to debug your code.

Sico has suggested a JQuery solution (which is good), but i think you need to debug your code first (understand it), and if you aren't displayed with error then probably provide more information, for example what is placeholder as you are not assigning an element to it, or anything but you are trying to assign css style to it.

Hope this helps point you in the right direction. Enjoy coding!

Kush