jQuery/Thymeleaf - 设置选中的值答案

【问题标题】：jQuery/Thymeleaf - setting the selected valuejQuery/Thymeleaf - 设置选中的值
【发布时间】：2020-03-20 13:04:22
【问题描述】：

引用@DanSingerman，

我知道按值设置它非常简单。例如

$("#my-select").val(myVal);

参考this previously asked similar question：

我正在尝试通过设置 SELECTed OPTION

$("#" + fragment + ".gender").val('').prop('disabled', false);

$("#" + fragment + ".gender").val(gender).prop('disabled', 'disabled');

但什么也没发生。使用 [name= 也不起作用。

选择（在一个片段 personInstance(participant) 中）：

           <select class="custom-select custom-select" th:id="__${personInstance}__.gender"
                    th:name="__${personInstance}__.gender">
                <option value="" selected
                        th:attr="data-salid=''"
                        th:text="#{option.select}">Select
                </option>
                <option th:each="salIter : ${salutations}"
                        th:attr="data-salid='__${salIter.baseIdentity.id}__'"
                        th:value="${{salIter.gender}}"
                        th:inline=text> [[#{${'gender.' + salIter.gender}}]]
                </option>
            </select>

代码：

   $("select[name$='.salutationId']").change(function (event) {
        /* propagate salutation gender to gender field and enable/disable */
        var fragment = this.name.match(/^(\w+)\..*$/);
        var salid = $(this).val(); //JS: this.options[this.selectedIndex].value;
        var gender = this.options[this.selectedIndex].getAttribute('data-gender');
        console.log("sal/Frag = " + fragment[1] + "SX:" + this.selectedIndex + " val:-" + salid + "- GND:" + gender + " set:" + fragment[1] + ".gender");
        if (salid === '') {
            $('[name="' + fragment[1] + '.gender"]').val('').prop('disabled', false);
        } else {
            $('[name="' + fragment[1] + '.gender"]').val(gender).prop('disabled', 'disabled');
        }
    });

生成的 HTML：

 <select class="custom-select form-control" id="participant.salutationId"
        name="participant.salutationId">
       <option value="" selected>-Auswählen-</option>
       <option value="1"
            data-gender="MALE">Herr</option>
       <option value="2"
            data-gender="FEMALE">Frau</option>
       <option value="3"
            data-gender="DIVERS">Divers</option>
 </select>

和

<select class="custom-select form-control" id="participant.gender"
        name="participant.gender">
    <option value="" selected>-Auswählen-</option>
    <option value="MALE"
            data-salid="1"> Männlich
    </option>
    <option value="FEMALE"
            data-salid="2"> Weiblich
    </option>
    <option value="DIVERS"
            data-salid="3"> Divers
    </option>
</select>

Gender 是一个 ENUM 并映射到外部化文本。使用 Jquery 3.4.1

SELECT 又有什么特别之处？

【问题讨论】：

现在使用名称有效，我在错误的地方有一个“，但我的鼻子上没有眼镜......这不能解释为什么 $('#' + fragment[1] + '.gender ').val(gender) 不起作用。
你能发布选择选项的生成HTML吗？我认为价值不匹配......价值观......如果这有任何意义
它目前运行良好，所以可以保持原样，但我想了解在选择器中直接使用 ID 的机制...

标签： jquery dom thymeleaf

【解决方案1】：

最终这行得通：

$("select[name$='.salutationId']").change(function (event) {
    /* propagate salutation gender to gender field and enable/disable */
    var fragment = this.name.match(/^(\w+)\..*$/);
    var salid = $(this).val(); //JS: this.options[this.selectedIndex].value;
    var gender = this.options[this.selectedIndex].getAttribute('data-gender');
    if (salid !== '') {
        $('[name="' + fragment[1] + '.gender"] option[value="' + gender + '"]').prop('selected', 'selected');
        $('[name="' + fragment[1] + '.gender"]').attr('readonly', 'readonly');
    } else {
        $('[name="' + fragment[1] + '.gender"] option[value=""]').prop('selected', 'selected');
        $('[name="' + fragment[1] + '.gender"]').removeAttr('readonly');
    }
}).change();

$("select[name$='.gender']").change(function (event) {
    /* propagate gender to salutation field and enable/disable gender*/
    var fragment = this.name.match(/^(\w+)\..*$/);
    var gender = this.options[this.selectedIndex].value;
    var salid = this.options[this.selectedIndex].getAttribute('data-salid');
    if (salid !== '') {
        $('[name="' + fragment[1] + '.salutationId"] option[value="' + salid + '"]').prop('selected', 'selected');
        $('[name="' + fragment[1] + '.gender"]').attr('readonly', 'readonly');
    } else {
        $('[name="' + fragment[1] + '.salutationId"] option[value=""]').prop('selected', 'selected');
        $('[name="' + fragment[1] + '.gender"]').removeAttr('readonly');
    }
});

让我提请你注意

$('[name="' + fragment[1] + '.salutationId"] option[value="' + salid + '"]').prop('selected', 'selected');

所以，要回答我自己的问题，不，“select”没有什么特别之处，它的工作方式与 JS 中的相同，因此您必须明确选择选项并将其设置为“selected”。

最初的想法，

$("#my-select").val(myVal);

仅适用于输入和文本区域字段。

【讨论】：