select2 选择给多个input赋值

最新推荐文章于 2024-01-04 10:31:18 发布

一叶一追寻ᝰ

最新推荐文章于 2024-01-04 10:31:18 发布

阅读量389

点赞数

分类专栏： thymeleaf select2

本文链接：https://blog.youkuaiyun.com/qq_36085460/article/details/115318565

版权

thymeleaf 同时被 2 个专栏收录

4 篇文章

订阅专栏

select2

2 篇文章

订阅专栏

该博客讨论了Java对象如何转换为JSON字符串用于前端展示。在CommonCustomer.java中，实现了toString方法，将对象关键字段如serialNo, customerId, customerName和alias放入JSONObject并转化为JSON字符串。在前端界面，使用Thymeleaf模板引擎遍历commonCustomerList，展示下拉选项，其中每个option的值为customerName。当用户选择一个选项时，JavaScript监听select2:select事件，解析选定项的title（即JSON字符串），并提取alias值填充到#customerAlias输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CommonCustomer.java

@Override
    public String toString() {
        JSONObject object=new JSONObject();
        object.put("serialNo",serialNo);
        object.put("customerId",customerId);
        object.put("customerName",customerName);
        object.put("alias",alias);
        return object.toJSONString();
    }

二、界面

<div class="col-sm-3">
   <select id="customer" name="customer" class="form-control m-b">
       <option>----请选择-----</option>
       <option th:each="commonCustomer : ${commonCustomerList}" th:title="${commonCustomer}" th:text="${commonCustomer.customerName}" th:value="${commonCustomer.customerName}"></option>
   </select>
</div>

三、js

$('#customer').on('select2:select', function (evt) {
  	var data=JSON.parse(evt.params.data.title);
     $('#customerAlias').val(data.alias);
 });

注：有问题改下这里试下<script th:inline="javascript">