[英]Update dropdown selection with JQuery in Java Play Framework
I want to dynamically add field inputs to a form as the user completes it. 我想在用户完成表单时将字段输入动态添加到表单。 However, if the user changes a value for a previous field that others depended on, then I want to hide those later fields again and reset their values back to the default.
但是,如果用户更改了其他人依赖的先前字段的值,那么我想再次隐藏那些较后的字段并将其值重新设置为默认值。 I can show and hide the input fields without a problem.
我可以毫无问题地显示和隐藏输入字段。 However, no matter what I do, I cannot change the value of the selection dropdown menu.
但是,无论做什么,我都无法更改选择下拉菜单的值。
Here is my script: 这是我的脚本:
$(function() {
$('#type_selection').change(function() {
var case_type = $('#type_selection :selected').val();
if(case_type !== "") { //the default value is an empty string
$('.subtype-panel').slideDown('slow');
}
else {
$('.subtype-panel').slideUp('slow');
$('#subytype_selection').val("").change();
}
});
});
Play template: 播放模板:
@(caseForm: play.data.Form[Case])
@import views.html.common._
@import models._
@implicitFieldConstructor = @{
b3.vertical.fieldConstructor
}
@main("New Case Info") {
<div class="page-header">
<h3>New Case Information<span class="pull-right label label-primary">Open</span></h3>
</div>
<fieldset>
@b3.form(action = routes.CaseController.save()) {
<div class="panel panel-primary">
<div class="panel-heading">Case Type</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
@b3.select(caseForm("caseType"),
options = options(Case.typeOptions),
'_id -> "type_selection",
'_label -> "Case Type",
'_default -> "-- Select a Type --")
</div>
<div class="col-md-3">
@datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
</div>
</div>
</div>
</div>
<div class="panel panel-primary subtype-panel">
<div class="panel-heading">Case Subtype</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
@b3.select(caseForm("caseSubType"),
options = options(Case.subTypeOptions),
'_id -> "subtype_selection",
'_label -> "Subtype",
'_default -> "-- Select a Subtype --")
</div>
</div>
</div>
</div>
}
</fieldset>
}
The b3 syntax may look a bit odd to you. b3语法对您来说可能有些奇怪。 It comes from a play bootstrap library: http://adrianhurt.github.io/play-bootstrap/ For b3 select fields, the default option is automatically assigned a value of an empty string.
它来自一个播放引导程序库: http : //adrianhurt.github.io/play-bootstrap/对于b3选择字段,默认选项会自动分配一个空字符串。 This is what I want to change my selection choice back to using JQuery.
这就是我想要将选择选择更改回使用JQuery的方式。
The solution is as adis said in his comment. 该解决方案正如adis在其评论中所说。 Using
_id -> foo
changes the id of the entire form-group (the label and the dropdown), but it does not change the id of the selection box specifically. 使用
_id -> foo
更改整个表单组(标签和下拉列表)的ID,但不会专门更改选择框的ID。 You have to use id -> foo
to do that. 您必须使用
id -> foo
来做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.