Bootstrap 下拉菜单删除默认值答案

【问题标题】：Bootstrap drop down menu remove default valueBootstrap 下拉菜单删除默认值
【发布时间】：2018-03-19 00:46:16
【问题描述】：

我在 html 中有一个下拉菜单。当用户选择限制为 10 行时，单击按钮时，将选择 10 行数据。但下拉菜单仍显示"Limit to 5 rows"。如何更改默认值？

 <div class="starter-template">
        <div class="row" style="margin-bottom:30px">
            <div class="col-md-12" style="margin-top:20px">
                <form id="form" name="form" class="form-inline">
                    <div class="form-group">
                        <select id="limit" name="limit" class="form-control">
                            <option value="5">Limit to 5 rows</option>
                            <option value="10">Limit to 10 rows</option>
                            <option value="50">Limit to 50 rows</option>

                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Filter</button>
                </form>
            </div>
        </div>

控制器类

@RequestMapping(value="/scoreLog", method = RequestMethod.GET)
    public String scoreLogList(Model model, @RequestParam(value = "limit", defaultValue = "5") Integer limit) {
        model.addAttribute("scoredList", txnLogRepository.findByScore(23, new PageRequest(0, limit)));
        return "scoreList";
    }

【问题讨论】：

你使用什么模板库？百里香？您需要将参数传递给您的模型并相应地呈现模板。
@MateuszMrozewski 是的，百里香

标签： spring spring-boot model-view-controller bootstrap-4

【解决方案1】：

首先在你的控制器中为你的模型添加属性：

model.addAttribute("limit", limit);

它将限制的当前值暴露给您的模板。

然后在你的模板中你需要修改选项标签：

<option value="5" th:selected="${limit == 5}">Limit to 5 rows</option>
<option value="10" th:selected="${limit == 10}">Limit to 10 rows</option>
<option value="50" th:selected="${limit == 50}">Limit to 50 rows</option>

见：

【讨论】：

谢谢你，我想我必须写一个javascript来实现这个：P
如果我有一个日期时间选择器，我想根据用户输入显示时间而不是显示默认值，我也可以使用这种方法吗？
可能会稍微复杂一些，具体取决于日期时间组件，但百里香的一般答案是肯定的 - 您需要通过模型将参数传递给模板并相应地渲染。