I'm trying to have a field appear in a form for when the user selects an option from a dropdown - i.e. if they select "Other" from a dropdown, a field appears below the dropdown saying "Please specify". I can't seem to get it to work at all - the "please specify" field appears visible all the time. Where am I going wrong? Thanks!
当用户从下拉列表中选择一个选项时,我试图在表单中显示一个字段 - 即如果他们从下拉列表中选择“其他”,则会在下拉列表下方显示“请指定”字段。我似乎无法让它工作 - “请指定”字段始终可见。我哪里错了?谢谢!
<script>
$(function(){
$("#pref-select").change(function(){
if ($("#pref-select").val()=="Other"){
$("#other-pref").show();
} else {
$("#other-pref").hide();
}
})
})
</script>
<div class="field">
<%= f.label :pref %><br />
<%= f.select :pref, ["", "1", "2", "Other"], {:id => "pref-select"} %>
</div>
<div class="field" id="other-pref">
<%= f.label :other_preference %><br />
<%= f.text_area :other_pref %>
</div>
2 个解决方案
#1
7
You can do it like this: http://jsfiddle.net/vooboo13/RK97r/1/
你可以这样做:http://jsfiddle.net/vooboo13/RK97r/1/
You give the fields you don't want to show css values of display:none;
您给出了不想显示css值为display:none的字段;
You then use jQuery to watch for a certain value and display it if it's that value.
然后使用jQuery监视某个值,如果它是该值则显示它。
HTML:
Select "fiat", and see magic happen
选择“菲亚特”,看看魔术发生了
<form action="" id="cars">
<select name="cars" id="car_selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p> </p>
<label class="hidden_option">Why would you DO that?</label>
<input type="text" name="reason" class="hidden_option" />
</form>
JS:
$(document).ready(function(){
$("#car_selector").change(function(){
if($("#car_selector").val() == "fiat"){
$(".hidden_option").fadeIn('fast');
}
});
});
CSS:
.hidden_option{
display: none;
}
#2
1
I never tried but have you ever heard of dependent-fields-rails gem?
我从来没有尝试,但你有没有听说过dependent-fields-rails gem?
#1
7
You can do it like this: http://jsfiddle.net/vooboo13/RK97r/1/
你可以这样做:http://jsfiddle.net/vooboo13/RK97r/1/
You give the fields you don't want to show css values of display:none;
您给出了不想显示css值为display:none的字段;
You then use jQuery to watch for a certain value and display it if it's that value.
然后使用jQuery监视某个值,如果它是该值则显示它。
HTML:
Select "fiat", and see magic happen
选择“菲亚特”,看看魔术发生了
<form action="" id="cars">
<select name="cars" id="car_selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p> </p>
<label class="hidden_option">Why would you DO that?</label>
<input type="text" name="reason" class="hidden_option" />
</form>
JS:
$(document).ready(function(){
$("#car_selector").change(function(){
if($("#car_selector").val() == "fiat"){
$(".hidden_option").fadeIn('fast');
}
});
});
CSS:
.hidden_option{
display: none;
}
#2
1
I never tried but have you ever heard of dependent-fields-rails gem?
我从来没有尝试,但你有没有听说过dependent-fields-rails gem?