这是我的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();
}
});
});
答案 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);
}
});
});