根据从下拉列表中选择的选项填充表

Question

如何获取Selected选项的值并在同一个html中使用它来使用thymeleaf和spring-boot从数据库中获取数据。

这是我的代码..

<form class="form-horizontal" action="#" method="post" data-th-action="@{/raw-stock-entry.html}" th:object="${itemReturn}">
<div class="box-body">
    <div class="form-group col-md-6">
        <label for="itemId" class="col-sm-5 control-label">Item Name <span style="color:red">*</span> </label>
        <div class="col-sm-6">
            <select class="form-control" th:field="*{itemId}" onchange="fetchData()">
                <option th:value="0">Select One</option>
                <option th:each="readyItem : ${readyItemsOnly}" 
                        th:text="${readyItem.itemName}" th:value="${readyItem.itemId}">
                </option>
            </select>
        </div>
    </div>
    <table id="Table" width="100%" >
        <thead>
           <tr>
               <th>SL#</th>
               <th>Item Name</th>
           </tr>
        </thead>
        <tbody>
           <tr th:each="itemList, itrItem : ${itemDetails}" th:if="${itemList.itemId} == 2">
                <td th:text="${itrItem.index+1}">Index </td>
                <td th:id="item" th:text="${itemList.itemName}" th:value="${itemList.itemName}"> </td>
                <td th:id="remainingQuantity" th:text="${itemList.remainingQuantity}" th:value="${itemList.remainingQuantity}"></td> 
           </tr>
        </tbody>
    </table>
</div>

在我的表格中，我从我的数据库中获取项目详细信息，如果我分配了一个itemId值，那么只会显示该项目详细信息。多数民众赞成。

但实际上我想显示从顶部的下拉选项中选择的项目详细信息。我可以使用js获取所选选项的值，但是如何在“th：if”字段中使用该值，以便我只能显示该项目的详细信息。如果没有使用js或使用js + thymeleaf混合物，有没有更好的解决方案。

Answer 1

你可以通过使用thymeleaf片段和ajax来实现这一目标。

在你的HTML中添加以下代码。

$('.drop-down').on('change', function() {
		var name = $('.drop-down option:selected').val();
		
            $.ajax({
	        	type: 'get',
	        	 url: /*[[ @{'/url'} ]]*/,
				  data:  {name:name},
				  success: function(returnedData){
					  console.log(returnedData); 					
					    $('.details').html(returnedData);
					 		  
					},    
					
					error: function(xhr, exception) {
						console.log(xhr);
		                  alert("error");
		                }
	        });
    
	});

<select class="form-control drop-down" th:field="*{itemId}" >
      .....
            </select>
<div class="details">
<div th:fragment="details">
<table>
......
......
<table>
<div>
<div>

并在你的控制器中写下像波纹管一样的代码。

@GetMapping("/url")
public ModelAndView getDetails(@RequestParam("name")String name){
   ModelAndView mv = new ModelAndView("htmlpagename::details");
   List<Item> itemDetails= repository.findByName(name);// your query result 
    mv.addObject("itemDetails",itemDetails);
     return mv;

}

希望这对你有用。