Question

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

查看示例屏幕截图：

enter image description here

下拉列表中有三个网络，AT＆amp; T，Verizon Wireless和T-Mobile。

我从下拉列表中选择了“AT＆amp; T”，然后出现“Sale Type”无线电。 T-Mobile网络可能与“AT＆amp; T”网络具有相同销售类型，但有两种额外销售类型。

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

消费者将有20个领域和企业有27个领域（额外领域）。 Sim-Only将有更少的字段--15个字段（一些删除和新字段）。

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

我使用了很多 $（'。name'）的jQuery。hide（）; $（'。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来验证它。

Answer 1

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

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

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

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

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

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

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

<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();
        }    
    });
});

你有它。无论何时选择新选项，所有不属于该表单的字段都将被隐藏，然后将显示与您的运营商和销售类型匹配的字段。它几乎会立即发生，用户将无法分辨出不同的内容。如果你愿意，你可以做一些褪色让它看起来更光滑。此外，如果verizon和att都可以看到一个字段，那么只需将两个类添加到该输入。如果您有任何问题，请告诉我。

我会尝试让小提琴准确显示如何做到这一点。

Answer 2

隐藏仅针对特定选项显示的所有字段，例如商家或免费SIM卡。

喜欢这样

<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();   
});

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

如何使多个表格更可靠？

2 个答案: