Rails:下拉列表值提交为零

时间:2017-02-27 03:09:56

标签: javascript ruby-on-rails radio-button

这是我的view。用户可以选择3个单选按钮。例如,当我选择Hourly时,它会显示#send_to_one

效果很好,显示下拉列表,但当我提交下拉列表的值变为nil时。

<div id="send_to">
  <div class="field">
    <%= f.label :package %><br>
    <%= f.radio_button :package, 'Hourly' %>Hourly<br/>
    <%= f.radio_button :package, 'Daily' %>Daily<br/>
    <%= f.radio_button :package, 'Monthly' %>Monthly<br/>
  </div>
  <div id="send_to_one">
    <div class="field">
      <%= f.label :day %>Hourly<br>
      <%= f.select(:day, [['1'],['2'],['3'],['4'],['5'],['6'],['7'],['8'],['9'],['10'],['11'],['12'],['13'],['14'],['15'],['16'],['17'],['18'],['18'],['20'],['21'],['22'],['23']],{include_blank: "-select-"}) %>
    </div>
  </div>
  <div id="send_to_two">
    <div class="field">
      <%= f.label :day %>Daily<br>
      <%= f.select(:day, [['1'],['2'],['3'],['4'],['5'],['6'],['7'],['8'],['9'],['10'],['11'],['12'],['13'],['14'],['15'],['16'],['17'],['18'],['18'],['20'],['21'],['22'],['23'],['24'],['25'],['26'],['27'],['28'],['29'],['30']],{include_blank: "-select-"}) %>
    </div>
  </div>
</div>

以下是我的javascript代码:

$(function() {
    $("#send_to_one").hide();
    $("#send_to_two").hide();
    $('input[type="radio"]').click(function(event) {
        if($(this).val() == 'Hourly') { 
            $("#send_to_one").show();
            $("#send_to_two").hide();
        } else if($(this).val() == 'Daily'){
            $("#send_to_two").show();
            $("#send_to_one").hide();
        } else{
            $("#send_to_one").hide();
            $("#send_to_two").hide();
        }
    });
});

1 个答案:

答案 0 :(得分:0)

您收到nil因为select下拉列表是作为帖子请求的一部分发送的。

解决此问题的一种方法是在隐藏其容器时禁用其中一个。更改javascript,例如:

$(function() {
    var $one = $("#send_to_one");
    var $two = $("#send_to_two");

    $one.hide().find("select").attr("disabled", true);
    $two.hide().find("select").attr("disabled", true);

    $('input[type="radio"]').click(function(event) {
        if($(this).val() == 'Hourly') {
            $one.show().find("select").attr('disabled', false);
            $two.hide().find("select").attr('disabled', true);
        } else if($(this).val() == 'Daily'){
            $two.show().find("select").attr('disabled', false);
            $one.hide().find("select").attr('disabled', true);
        } else{
            $one.hide().find("select").attr("disabled", true);
            $two.hide().find("select").attr("disabled", true);
        }
    });
}); 

更新1

根据您的评论,请检查:

$(function() {
    var $one = $("#send_to_one");
    var $two = $("#send_to_two");
    var $three = $("#send_to_three");

    $one.hide().find("select").attr("disabled", true);
    $two.hide().find("select").attr("disabled", true);
    $three.hide().find("select").attr("disabled", true);

    $('input[type="radio"]').click(function(event) {
        if($(this).val() == 'Hourly') {
            $one.show().find("select").attr('disabled', false);
            $two.hide().find("select").attr('disabled', true);
            $three.hide().find("select").attr("disabled", true);
        } else if($(this).val() == 'Daily'){
            $two.show().find("select").attr('disabled', false);
            $one.hide().find("select").attr('disabled', true);
            $three.hide().find("select").attr("disabled", true);
        } else if($(this).val() == 'Monthly'){
            $two.hide().find("select").attr('disabled', true);
            $one.hide().find("select").attr('disabled', true);
            $three.show().find("select").attr("disabled", false);
        } else{
            $one.hide().find("select").attr("disabled", true);
            $two.hide().find("select").attr("disabled", true);
            $three.hide().find("select").attr("disabled", true);
        }
    });
});