Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выпадающий список select, option , selected ... (https://javascript.ru/forum/events/76670-vypadayushhijj-spisok-select-option-selected.html)

JustMe 01.02.2019 15:06

Выпадающий список select, option , selected ...
 
Добрый день. Пытаюсь сделать выпадающий список. select, option ....
C бэка приходит модель в которой есть list<record>, так же приходит список объектов list<property>. Объект record содержит поле property. То есть чтобы сменить property у объекта нужно открыть выпадающий список и выбрать определенное значение. Если объект record создается, то все нормально поле пустое нажимаешь на него и выбираешь нужное значение. А вот если надо изменить property у record, то это поле надо отображать не пустым а с текущим значением. В этом трудность, В поле отображается всегда последнее значение list<property>. Как его можно настроить?


<h2>
    <span id="record" th:text="${record.property}"> </span>

</h2>

<div class="properties">
                    <select id="property" name="property">
                        <option value="Выбор свойства"/>
                        <option th:each="property : ${properties}"
                                th:value="${property.id}"
                                th:text="${property.name}"
                                th:selected="${property.id}">
                        </option>
                    </select>
</div>


Вот такой скрипт помогает сделать выбор значения но "вслепую",

$(document).ready(function () {
  $('#properties).val("10");
}

мне надо выбирать исходя из соответствия, что property.id === record.property

Подскажите как это реализовать

Nexus 01.02.2019 17:18

Не знаю, что у вас за шаблонизатор, но можно попробовать так:
<h2>
   <span id="record" th:text="${record.property}"> </span>
</h2>
<div class="properties">
   <select id="property" name="property">
      <option value="Выбор свойства"/>
      <option th:each="property : ${properties}"
         th:value="${property.id}"
         th:text="${property.name}"
         th:selected="${property.id}===${record.property}">
      </option>
   </select>
</div>

Или так:
$(function() {
    $('#property').val(
        $('#record').text()
    );
});


Если у вас на странице отрисовывается весь список объектов "record", то идентификаторы нужно будет или изменить, или заменить на классы, к примеру, т.к. id - уникальный идентификатор.

JustMe 04.02.2019 12:09

Спасибо большое работает! Шаблонизатор Thymeleaf.
"${property.id}==${record.property}"> только два знака надо, иначе подчеркивает, что неправильно.


Часовой пояс GMT +3, время: 13:54.