jQuery/Thymeleaf - setting the selected value

Question

To quote @DanSingerman ,

I know setting it by value is pretty trivial. e.g.

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

Referring to this previously asked similar question:

I am trying to set the SELECTed OPTION via

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

resp

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

but nothing happens. Using [name= doesn't work either.

The select (in a fragment 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>

Code:

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

Generated 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>

and

<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 is an ENUM and mapped to externalized text. Using Jquery 3.4.1

Anything special with SELECTs again?

Using name works now, I had one " at the wrong place, but no glasses on my nose... This does not explan why $('#' + fragment[1] + '.gender').val(gender) does not work. — , Nov 25 '19 at 10:47
Can you post the generated HTML of the select options? I'm thinking there's mismatch in value.. values.. if that makes any sense — mathiasb, Nov 29 '19 at 10:22
It's currently pretty well working, so one could leave it as is, but I'd like to understand the mechanism of directly using the ID in the selector... — , Dec 02 '19 at 11:42

score 0 · Accepted Answer · answered Dec 19 '19 at 08:33

Eventually this works:

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

Let me draw your attention to

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

So, to answer my own question, no, there is nothing special with "select", it works the same way as in JS, so you have to explicitly select the option as set it "selected".

The original idea,

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

only works for input and textarea fields.

jQuery/Thymeleaf - setting the selected value

1 Answers1