Выберите раскрывающийся список шоу шоу

0

У меня есть выпадающее меню select/options, и когда пользователь меняет этот параметр, есть 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>
  • 0
    Добавлен обновленный ответ для вас
Теги:
wordpress-plugin

2 ответа

0

Хорошо, что я заметил в вашем 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 Dev, так как это позволит вам наблюдать за консолью, если есть ошибки javascript, и вы также сможете отлаживать свой код.

Sico предлагает решение JQuery (это хорошо), но я думаю, вам нужно сначала отлаживать свой код (понять его), и если вы не показываетесь с ошибкой, то, вероятно, предоставите больше информации, например, что такое placeholder как вы не присваивая ему элемент или ничего, кроме того, что вы пытаетесь присвоить ему стиль css.

Надеюсь, это поможет вам в правильном направлении. Наслаждайтесь кодированием!

Куш

Поделиться
  • 0
    Спасибо за советы! Я нуб. У меня есть один вопрос, хотя ... так как я использую плагин контактной формы 7, у меня не может быть события onclick. Вот почему я использовал window.onload. Есть ли способ лучше?
  • 0
    Нет, это должно быть хорошо, один вопрос, можете ли вы подтвердить, что ваш javascript запущен после загрузки вашего элемента servicesonchange?
0

Как насчет этой упрощенной версии

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 (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();
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню