Question

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

这是我的剧本：

$(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语法对你来说可能有点奇怪。它来自一个游戏引导库：http://adrianhurt.github.io/play-bootstrap/ 对于b3选择字段，将自动为默认选项指定空字符串的值。这就是我想要将我的选择选择改回使用JQuery。

Answer 1

解决方案就像adis在评论中所说的那样。使用_id -> foo更改整个表单组的ID（标签和下拉列表），但它不会特别更改选择框的ID。您必须使用id -> foo来执行此操作。

使用Java Play Framework中的JQuery更新下拉列表选择

1 个答案: