Question

好的，我必须整合这个有点复杂的HTML。这是一个带下拉的按钮（使用咏叹调），我必须传入一个货币列表，并能够选择其中一个下拉元素（货币值）并使用所选值更新按钮文本。我写了一小部分js，效果很好。我使用百里香叶传递价值来填充，这很有效。我还需要读取从post到spring mvc控制器设置的值，但是我总是得到一个空字符串，用于通过js设置的值。

这是javascript

  $(".currencyDropdown li a").click(function () {
            var selText = $(this).text().trim();
            var button = $("#currencyButton");
            button.text(selText);
            console.log("currency selected is:" + selText);
        });

这是html

<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle field-small"
                                type="button"
                                id="currencyButton"
                                name="currencyButton"
                                th:field="${pals.selectedCurrency}"
                                data-toggle="dropdown"
                                th:inline="text">
                            [[${pals.selectedCurrency}]]
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul id="currencyDropdown"
                            class="dropdown-menu currencyDropdown"
                            role="menu"
                            aria-labelledby="currencyButton">
                            <li role="presentation"
                                th:each="currency:${pals.currencyList}">
                                <a role="menuitem"
                                   tabindex="-1"
                                   href="#"
                                   th:inline="text">
                                    [[${currency}]]
                                </a>
                            </li>
                        </ul>
                    </div>

我试图在spring mvc控制器中读回的是pals.selectedCurrency值，它总是为空的。我错过了什么？我一直在玩，试着设定价值和领域。实际上我想阅读我的js插入的内联文本。

Answer 1

我认为你必须在你的按钮上添加一个th：片段，并通过ajax从服务器的back bean更改按钮的文本，而不是从javascript。它是这样的：

<form th:action="@{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}" 
              method="POST" th:if="${param.contract != null}">

......其他表单组件

<div class="form-group">
                                <label class="col-sm-4 control-label" 
                                       th:text="#{person.edit.policy.tfoms}"></label>

                                <div class="col-sm-8">
                                    <select class="form-control" th:field="*{tfoms}" 
                                            onchange="loadInsuranceCompanies()">
                                        <option th:each="t : ${tfomses}" 
                                                    th:value="${t.uidtfoms}"  
                                                    th:text="${t.shortName}"
                                                    th:selected="${personBean.tfoms != null 
                                                    and personBean.tfoms.equals(t)}"></option>
                                    </select>
                                </div>
                            </div>
                            <div th:class="${#fields.hasErrors('insuranceCompany')} 
                                 ? 'form-group has-error' : 'form-group'">
                                <label class="col-sm-4 control-label" 
                                       th:text="#{person.edit.policy.ic}"></label>

                                <div class="col-sm-8" id="insuranceCompaniesContent">
                                    <select class="form-control" id="insuranceCompany" 
                                            name="insuranceCompany"  
                                            th:fragment="insuranceCompany">
                                        <option th:each="i : ${insuranceCompanies}" 
                                                    th:value="${i.uidinsurancecompany}"  
                                                    th:text="${i.shortName}"
                                                    th:selected="${personBean.insuranceCompany != null 
                                                    and personBean.insuranceCompany.equals(i)}"></option>
                                    </select>
                                    <div th:if="${#fields.hasErrors('insuranceCompany')}" 
                                         th:each="err : ${#fields.errors('insuranceCompany')}">
                                        <span class="text-danger" th:text="${err}"></span><br/>
                                    </div>
                                </div>
                            </div>

在我的情况下，我通过另一个刷新一个下拉列表。然后通过项目选择上的ajax刷新此片段

function loadInsuranceCompanies() {
                var url = [[@{/PersonEdit/insuranceCompanies}]];
                if ($('#tfoms').val() !== '') {
                    url = url + '/' + $('#tfoms').val();
                }
                $("#insuranceCompaniesContent").load(url);
            }

我认为麻烦可能是因为您没有使用标准选择作为下拉列表。

Answer 2

好的，我找到了一个相对简单的答案。我必须使用由于客户的外观考虑而提供的html。

所以我所做的就是添加一个隐藏的输入并从java脚本中设置它。

$(".currencyDropdown li a").click(function () {
        var selText = $(this).text().trim();
        $("#currencyButton").text(selText);
        $("#currencySelected").val(selText);
        console.log("currency selected is:" + selText);
    });

<input type="hidden"
                               id="currencySelected"
                               th:field="${pals.selectedCurrency}"/>
                        <button class="btn btn-default dropdown-toggle field-small"
                                type="button"
                                id="currencyButton"
                                data-toggle="dropdown"
                                th:inline="text">
                            [[${pals.selectedCurrency}]]
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul id="currencyDropdown"
                            class="dropdown-menu currencyDropdown"
                            role="menu"
                            aria-labelledby="currencyButton">
                            <li role="presentation"
                                th:each="currency:${pals.currencyList}">
                                <a role="menuitem"
                                   tabindex="-1"
                                   href="#"
                                   th:inline="text">
                                    [[${currency}]]
                                </a>
                            </li>
                        </ul>

我看到为弹簧mvc控制器上的下拉列表选择了正确的值，现在我可以继续使用其余的东西了。

从百里香叶的按钮文本中获取值

2 个答案: