在 Java Play Framework 中使用 JQuery 更新下拉选择答案

【问题标题】：Update dropdown selection with JQuery in Java Play Framework在 Java Play Framework 中使用 JQuery 更新下拉选择
【发布时间】：2016-03-04 16:27:24
【问题描述】：

我想在用户完成表单时动态地将字段输入添加到表单中。但是，如果用户更改了其他人所依赖的先前字段的值，那么我想再次隐藏那些后面的字段并将它们的值重置为默认值。我可以毫无问题地显示和隐藏输入字段。但是，无论我做什么，我都无法更改选择下拉菜单的值。

这是我的脚本：

$(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();  
        }
    });

});

播放模板：

@(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>

}

b3 语法对您来说可能有点奇怪。它来自一个 play bootstrap 库：http://adrianhurt.github.io/play-bootstrap/ 对于 b3 选择字段，默认选项会自动分配一个空字符串的值。这就是我想将选择选项改回使用 JQuery 的原因。

【问题讨论】：

你检查过b3生成的id吗？我想如果你想要覆盖它，你应该使用：'id -> "type_selection"，所以没有下划线
@adis 成功了！我不知道 b3 的这条规则。谢谢！

标签： javascript jquery forms twitter-bootstrap playframework

【解决方案1】：

解决方案正如 adis 在他的评论中所说的那样。使用_id -> foo 会更改整个表单组的id（标签和下拉菜单），但不会专门更改选择框的id。你必须使用id -> foo 来做到这一点。

【讨论】：