0

我正在为多种表格寻找一个简洁的解决方案。

看一下示例截图：

在此处输入图像描述

下拉列表中有三个网络，AT&T、Verizon Wireless 和 T-Mobile。

我从下拉列表中选择了“AT&T”，然后出现“销售类型”收音机。T-Mobile 网络可能具有与“AT&T”网络相同的销售类型，但有两个额外的销售类型。

所有销售类型中的大多数文本框都是相同的。例如：

消费者将有 20 个字段，而企业将有 27 个字段（附加字段）。Sim-Only 将有更少的字段 - 15 个字段（一些已删除和新的字段）。

像这样和 DRY 原则的一个好的解决方案是什么？

我用过很多$('.name').hide(); 的jQuery。$('.name').hide(); 但它变得非常混乱。例子：

$(".at&t_consumer_radio").click(function(){
       showSaleType("at&t_consumer");
});

function showSaleType(type) {
        if (type == "at&t_consumer") { 
          $('.name').hide(); 
          $('.name').hide(); and so on..
     } 
}

填写表格后，我使用 PHP 对其进行验证。

4

2 回答 2

1

这是小提琴：http: //jsfiddle.net/GvGoldmedal/FxEGP/

最好的办法是创建以下类标签：

.att、.verizon。、.tmobile、.consumer、.business、.sim

然后，您可以根据何时需要隐藏字段来标记字段。如果一个字段用于 verison，那么它将获得一个 verizon 类。如果一个字段是业务类型，那么它将获得业务类。还将“隐藏”类添加到任何不总是显示的字段。

Some Field:
<input type="text" class=" hide verizon att consumer" />

Another Field
<input type="text" class = " hide att business" />

确保标记每个字段。还要确保您的单选按钮和选择中的选项具有与类匹配的值。并为您的选择和单选按钮提供一类“选项”，如下所示：att verizon tmobile 

<input type='radio' name='sale_type' class='option' value="business" />
<input type='radio' name='sale_type' class='option' value="consumer" />
<input type='radio' name='sale_type' class='option' value="consumer" />

.. 等等

现在对于 Jquery：

//selectId is the ID of your select 
// myform is the id of your form



$(".option").change(function()
{   
     // get the value of our select and option
     carrier =  $('#selectId option:selected').val();
     sale_type = $('input[name=sale_type]:checked').val();

    // Hide all fields that don't always show up.
     $(".hide").hide();

    //Show all fields that match our carrier and sale type

    $(".hide").each(function(){
        if($(this).hasClass(carrier) && $(this).hasClass(sale_type))
        {            
            $(this).show();
        }    
    });
});

你有它。Anytime a new option is selected all the fields that aren't part of the form all the time will be hidden and the ones matching your carrier and sale type will then be shown. 它几乎会立即发生，用户将无法区分。如果需要，您可以进行一些褪色以使其看起来更平滑。此外，如果一个字段对于 verizon 和 att 都是可见的，那么只需将这两个类都添加到该输入中。如果您有任何问题，请告诉我。

我会尝试让 Fiddle 准确地展示如何做到这一点。

于 2012-04-20T14:48:30.890 回答
1

隐藏所有仅针对特定选择显示的字段，例如商务或免费模拟。

像这样

<input type="text" class="standard" />
<input type="text" class="business" style="display:none" />
<input type="text" class="simOnly" style="display:none" />
<input type="text" class="standard" />
<input type="text" class="business simOnly" style="display:none" />

不确定我是否解释得很好。:(

如果选择了该选项，则使用 jquery 仅显示业务

$("#businessRadio").click(function(){          
    $('.business').show();   
});

这样您就不会显示和隐藏所有内容，而只是显示和隐藏每种销售类型的特定输入

于 2012-04-20T14:48:48.470 回答