A colleague encountered the problem of displaying data in the middle drop-down box of LayUI. Record it here. The solution of displaying data is as follows:

  • Set the Selected property using the template engine comparison
  • Set the value of the select tag through JavaScript to set the echo

In this case, the checkbox of Layui under Thymeleaf template is displayed, and the dynamically generated HTML page results are as follows:

<div class="layui-form-item">
    <label class="layui-form-label"><span class="color-red">* </span>Send object:</label>
    <div class="layui-input-inline">
        <select id="bookList">
            <option value="">Please select a</option>
            <option value="1">Journey to the west</option>
            <option value="2">A dream of red mansions</option>
            <option value="3">Water margin</option>
            <option value="4">The romance of The Three Kingdoms</option>
        </select>
    </div>
</div>
Copy the code

1. Label mode

// The data code passed by the controller
model.addAttribute("bookId".3);
model.addAttribute("bookList",bookList);
Copy the code

(1) Option display in the drop-down list box

<div class="layui-form-item">
    <label class="layui-form-label"><span class="color-red">* </span>Send object:</label>
    <div class="layui-input-inline">
        <select id="bookList">
            <option value="">Please select a book</option>
            <option th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}"
            th:selected="${book['id'] eq bookId}"
            ></option>
        </select>
    </div>
</div>
Copy the code

(2) The option dialog box is displayed

<input type="radio" name="bookRadio" th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}" th:checked="${book['id'] eq bookId}">
Copy the code

(3) Multiple check box echo (extended)

model.addAttribute("arr".new int[] {2.3});
Copy the code
<input type="checkbox" name="bookCheckBox" th:each="book:${bookList}" th:text="${bookList['name']}" th:value="${bookList['id']}" th:checked="${#arrays.contains(arr,hobby['id'])}">
Copy the code

The above methods: are controlled by their own labels

2. The JavaScript

Without LayUI, I can easily do it as follows:

<select id="bookList">
    <option value="">Please select a hobby</option>
    <option th:each="book:${bookList}" th:text="${book['name']}" th:value="${book['id']}"></option>
</select>
<script>
    let bookId = '[[${bookId}]]';
    document.getElementById("bookList").value=bookId;
</script>
Copy the code

Note: When LayUI is introduced, the above method of setting the echo via JavaScript == is invalid ==, because when LayUI is used, the rendering structure is as follows

Is that what we’re talking about here? Does code analysis show why we can’t echo data? Select the elements that are available here are obtained from background data using jquery, and you need to decide which one to select based on the dynamic results. Analyze the structure of the rendering result and obtain the DOM tree as follows:

A layui-form-select div was added under layui-input-inline in addition to select. The div contains two child elements, layui-select-title and DL, and the select event can be implemented by clicking on an identified DD element under DL.

let bookId = '[[${bookId}]]';
if(bookId! =' ') {// First you need to use lay-value to determine which element auto-select needs to be set
    var select = 'dd[lay-value=' + bookId + '] ';
    // Trigger the click event to achieve automatic selection
    $('#bookList).siblings("div.layui-form-select").find('dl').find(select).click(); } // The test was successfulCopy the code

Personally, the following writing method can also be done:

let bookId = '[[${bookId}]]';
$("#bookList").val($(bookId);//atype is the ID of select
form.render('select');
Copy the code

Note: Form. render must be added otherwise it will not render properly. Dynamic layui select is selected.

var bookId=$("#bookId").val();// Suppose we get the value of the hidden field
// Make option selected based on the value
$("#bookList option[value='"+bookId+"']").attr("selected"."selected"); 
// There is no test for this, I will test myself tomorrow, do you want to re-render? After testing, I need to render
form.render('select');
Copy the code

Question: How to handle multiple tag rendering? Reference documents: check boxes

var bookId = $("select[name='bookList']").val();// Get the selected value
Copy the code