Question

我正在创建一个网络表单，让社团可以查询高尔夫俱乐部提供的套餐。提供7种不同的套餐，每种套餐都有不同的活动组合。

我想设置表单，以便在从下拉菜单中选择包时，会显示相应的字段组合，如下所示。当用户选择了一个包时，他们会填写参加每个活动的人数，每个活动的首选时间以及每个活动的菜单选择。这是表单中唯一变化的部分，详细信息如姓名，社团名称，电子邮件，进一步评论等将始终显示。

Choices

我试图将每个字段（例如早晨的咖啡，午餐等）放入带有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，我有点新手，所以非常感谢任何帮助。

Answer 1

我的代码看起来并不太近，但这可以通过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，并且更容易更改或添加新包。

每当下拉列值更改时，它会显示所有表行，并根据没有相应package_x类的包（.filtered）隐藏应该过滤的那些行。

根据下拉选择显示表单字段的不同组合

1 个答案: