Javascript 基于Ruby-on-Rails下拉表单的字段显示和隐藏

我有一个基本的web表单，我需要根据下拉列表的结果显示/隐藏一个字段。这里是我目前拥有的：

 <% choose_me = "--Choose one--" %>
<script type="text/javascript"> 
var f_distributor;  

function show_hide_fields(type){
    if (show_hide_fields == "Retailer"){            
        f_distributor = new LiveValidation('i_distributor');
        f_distributor.add( Validate.Presence );         
        $('#distributor').show();
    }
    if (show_hide_fields == "Distributor"){
        f_distributor.destroy();            
        $('#distributor').hide();           
    }
    if (show_hide_fields == "Direct Purchase Retailer"){
        f_distributor.destroy();            
        $('#distributor').hide();
    }
    if (show_hide_fields == "Distributor Rep"){
        f_distributor.destroy();            
        $('#distributor').hide();
    }
    if (show_hide_fields == "Catalog/E-Commerce Company"){
        f_distributor.destroy();            
        $('#distributor').hide();
    }
    if (show_hide_fields == "Other"){
        f_distributor.destroy();            
        $('#distributor').hide();
    }
    if (show_hide_fields == "--Choose one--"){
        f_distributor.destroy();            
        $('#distributor').hide();
    }
}
$(document).ready(function(){

    f_distributor = new LiveValidation('i_distributor');
    var f_type = new LiveValidation('i_type');
    f_type.add( Validate.Exclusion, { within: ['<%= choose_me %>'], failureMessage: "You must choose from the list."} );
    var f_dealer_business_name = new LiveValidation('i_dealer_business_name');
    f_dealer_business_name.add( Validate.Presence );
    var f_dealer_address1 = new LiveValidation('i_dealer_address1');
    f_dealer_address1.add( Validate.Presence );
    var f_dealer_city = new LiveValidation('i_dealer_city');
    f_dealer_city.add( Validate.Presence );
    var f_dealer_state = new LiveValidation('i_dealer_state');
    f_dealer_state.add( Validate.Exclusion, { within: ['<%= choose_me %>'], failureMessage: "You must choose from the list."} );
    var f_dealer_zip = new LiveValidation('i_dealer_zip');
    f_dealer_zip.add( Validate.Presence );
    f_dealer_zip.add( Validate.Length, { minimum: 5 } )
    var f_phone = new LiveValidation('i_phone');
    f_phone.add( Validate.Presence );
    f_phone.add( Validate.Length, { minimum: 10 } )
    var f_user_name = new LiveValidation('i_user_name');
    f_user_name.add( Validate.Presence );
    f_user_name.add( Validate.Email )
    var f_password = new LiveValidation('i_password');
    f_password.add( Validate.Presence );
    f_password.add( Validate.Length, { minimum: 6 } );
    var f_terms_acceptance = new LiveValidation('i_terms_acceptance', { insertAfterWhatNode: 'terms_acceptance_error' });
    f_terms_acceptance.add ( Validate.Acceptance );
    show_hide_fields($("input[@name='i_account']:checked").val());
});

var f_分配器；
函数显示\隐藏\字段（类型）{
如果（显示隐藏字段==“零售商”）{
f_distributor=新的LiveValidation（“i_distributor”）；
f_distributor.add（Validate.Presence）；
$（“#分发服务器”）.show（）；
}
if（显示\隐藏\字段==“分发服务器”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
if（显示\隐藏\字段==“直购零售商”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
if（显示\隐藏\字段==“分销商代表”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
if（显示\隐藏\字段==“目录/电子商务公司”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
如果（显示\隐藏\字段==“其他”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
如果（显示\隐藏\字段==“--选择一个--”）{
f_distributor.destroy（）；
$（“#分发服务器”）.hide（）；
}
}
$（文档）.ready（函数（）{
f_distributor=新的LiveValidation（“i_distributor”）；
var f_type=newlivevalidation（'i_type'）；
f_type.add（Validate.Exclusion，{within:['']，failureMessage:“您必须从列表中选择。”}）；
var f_dealer_business_name=new LiveValidation（“i_dealer_business_name”）；
f_经销商_业务_名称。添加（验证。存在）；
var f_dealer_address1=新的现场验证（“i_dealer_address1”）；
f_经销商地址1.添加（验证、在场）；
var f_dealer_city=新的LiveValidation（“i_dealer_city”）；
f_dealer_city.add（Validate.Presence）；
var f_dealer_state=新的实时验证（“i_dealer_state”）；
f_dealer_state.add（Validate.Exclusion，{within:['']，failureMessage:“您必须从列表中选择。”}）；
var f_dealer_zip=新的实时验证（“i_dealer_zip”）；
f_dealer_zip.add（Validate.Presence）；
f_dealer_zip.add（Validate.Length，{最小值：5}）
var f_phone=new LiveValidation（“i_phone”）；
f_phone.add（Validate.Presence）；
f_phone.add（Validate.Length，{最小值：10}）
var f_user_name=new LiveValidation（'i_user_name'）；
f_用户名.add（Validate.Presence）；
f_用户名。添加（验证。电子邮件）
var f_password=new LiveValidation（'i_password'）；
f_password.add（Validate.Presence）；
f_password.add（Validate.Length，{minimum:6}）；
var f_terms_acceptance=new LiveValidation（'i_terms_acceptance'，{insertAfterWhatNode:'terms_acceptance_error'}）；
f_terms_acceptance.add（验证验收）；
显示隐藏字段（$（$input[@name='i_account']：选中”）.val（）；
});

“如果（show#hide_fields.value='Retailer'）{$（'#distributor'）.show（）}其他{$（'#distributor'）.hide（）}；返回false”%>

---

表单没有抛出任何错误，但也没有显示隐藏字段。我使用id来显示和隐藏字段。如果有任何帮助，我们将不胜感激。

在您看来，如果选择字段发生更改，您会在何处设置一个事件来执行某些操作？我认为没有特定的事件，但它是根据类似的代码建模的，我根据if更改了该代码（类型==“零售商”）{where type=下拉列表字段，所以我想这就是事件是的，我注意到另一个代码有单选按钮的onclick事件，但在这种情况下只有两个选项。对于一个有7个选项的下拉列表，我该如何做呢？更新并简化了一个

onchange

事件是必不可少的。没有它，如果没有它，什么都不会发生ng在这种情况下发生了变化。我在您的新示例中仍然没有看到它。当您创建一个示例时，它可以检查所选的值并相应地进行操作。

                <div class="field"><%= select_tag "i[type]", options_for_select([ choose_me, "Retailer", "Distributor", "Direct Purchase Retailer", "Distributor Rep", "Catalog/E-Commerce Company", "Other" ], choose_me), :onchange => "if(show_hide_fields.value =='Retailer'){$('#distributor').show()} else {$('#distributor').hide()}; return false" %></div>