Отображение различных комбинаций полей формы на основе выпадающего списка

Question

Отображение различных комбинаций полей формы на основе выпадающего списка

0

Я создаю веб-форму, чтобы позволить обществам узнать о пакетах, предлагаемых в гольф-клубе. Предлагается 7 различных пакетов, каждый из которых имеет различную комбинацию действий.

Я хочу установить форму так, чтобы при выборе пакета из выпадающего меню была показана соответствующая комбинация полей, как показано ниже. Когда пользователь выбрал пакет, они затем заполняют количество людей, посещающих каждое мероприятие, предпочтительное время для каждого и их вариантов меню для каждого. Это единственная часть формы, которая изменяется, такие данные, как имя, название общества, электронная почта, дополнительные комментарии и т.д. Всегда будут показаны.

Я попытался поместить каждое поле (например, утренний кофе, обед и т.д.) В его собственную таблицу с тегом id, например. <table id="summerSaver">. Эти таблицы содержали соответствующие поля ввода (время, количество людей, выбор меню и т.д.). Затем я дал правило css, чтобы убедиться, что все они скрыты, чтобы начать, например. #summerSaver{display:none;}. Затем я использовал javascript для изменения правила css в зависимости от того, что должно быть показано:

<script type='text/javascript'>
window.onload=function(){ 
    var select = document.getElementById("pack");
    select.onchange=function(){
        //Summer Saver
        if(select.value=="summerSaver"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("bacon").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("bacon").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Full Round
        if(select.value=="fullRound"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("dinner").style.display="inline";
           document.getElementById("dessert").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("dinner").style.display="none";
           document.getElementById("dessert").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Early Starter
        if(select.value=="earlyStarter"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("breakfast").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("breakfast").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Light Lunch
        if(select.value=="lightLunch"){
           document.getElementById("morningcoffee").style.display="inline";
           document.getElementById("lunch").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
           document.getElementById("lunch").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Eighteen Holer
        if(select.value=="eighteenHoler"){
           document.getElementById("dinner").style.display="inline";
           document.getElementById("dessert").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("dinner").style.display="none";
           document.getElementById("dessert").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Good Value Day
        if(select.value=="valueDay"){
           document.getElementById("dinner").style.display="inline";
           document.getElementById("diet").style.display="inline";
        }else{
           document.getElementById("dinner").style.display="none";
           document.getElementById("diet").style.display="none";
        }
        //The Easy Round
        if(select.value=="easyRound"){
           document.getElementById("morningcoffee").style.display="inline";
        }else{
           document.getElementById("morningcoffee").style.display="none";
        }
    }
}
</script>

Проблема, которую я испытываю, заключается в том, что правильные таблицы не отображаются. Например, Summer Saver показывает только бутерброды Бэкона, а Full Round ничего не показывает. При дальнейшем осмотре на странице отображается только одна таблица для каждой упаковки или вообще отсутствует.

Я немного новичок, когда дело доходит до Javascript и JQuery, поэтому любая помощь будет очень оценена.

Matt Gibson 13 апр. 2014, в 19:43

Источник

Теги:

php

javascript

jquery

html

forms

1 ответ

Ещё вопросы

Thomas · Answer 1 · 2014-04-13T15-46-00.000Z

Я не слишком внимательно смотрел на ваш код, но это можно было бы легко выполнить с помощью jQuery:

http://jsfiddle.net/TSDb6/1/

Это JS, который я использовал:

$(function(){
    var $table = $('#table');
    $('#package').on('change', function(){
        $table.find('tr').show().filter('.filter:not(.package_'+this.value+')').hide()
    }).trigger('change');
});

Все строки имеют классы, которые определяют, когда они должны отображаться. Это уменьшает необходимые js и упрощает изменение или добавление новых пакетов.

Всякий раз, когда изменяется выпадающее значение, он показывает все строки таблицы и скрывает те, которые должны быть отфильтрованы в соответствии с пакетами (.filtered), которые не имеют соответствующего класса package_x.

Спасибо за ответ. Хотя я не мог заставить его работать правильно, адаптируя ваш код, я нашел другую работу.