Question

我正在使用java（spring boot）开发一个项目。我们在项目中使用框架百里香。现在我遇到了一个问题：

我上面有2个选择列表。当我在第一个列表中选择一个项目时，我希望第二个选择列表填充与该选定项目相关的项目。我该怎么做呢？注意：第一个选择列表中的数据来自我的控制器，我也传递了必须在第二个选择列表中填写的数据，但是这些信息仍然需要根据第一个选择列表进行过滤。

给你们一个背景故事。第一个选择列表包含所有客户，当选择客户时，第二个选择列表必须填写客户拥有的所有项目。

现在代码

观点：

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Generate invoice</h4>
</div>
<div class="modal-body">
<label>What customer do you want to create an invoice from ?</label>
<!--Dropdown projects-->
<div>
<div id="dropdowncontracts">
<select class="selectpicker" id="picker">
<option selected disabled>Select a customer</option>
<option value="all">all customers</option>
<option th:each="customer : ${customers}" th:text="${customer.name}"/>
</select>
</div>
<div id="hiddenClient">
<label style="position: absolute">What contract ?</label>
<select class="selectpicker" style="float: left; position: relative; margin-left: 0px;">
<option selected disabled>select a contract</option>
<option>all contracts</option>
<option>contract 1</option>
<option>contract 2</option>
<option>contract 3</option>
</select>
</div>
</div>

控制器：

@GetMapping
@Secured(Roles.FINANCIAL)
public String getInvoices(Model model) {
    model.addAttribute("invoice", service.getInvoices());
    model.addAttribute("customers",customerService.getCustomers());
    model.addAttribute("projects",projectService.getProjects());
    return INVOICE_LIST_PATH;
}

如果您需要别的东西，请不要犹豫！提前致谢

编辑1：

非常感谢Ashutosh的答案，但由于引导选择列表，我仍然有问题。 Bootstrap在运行时创建选择列表，因此当我填充选择列表时，bootstrap已经在运行时创建了“漂亮的”列表。请参阅以下代码：

inspector overview

解决了我自己的问题

填写我的选择列表后，只需要一个.selectpicker（'refresh'）。

感谢大家的帮助！

Answer 1

@Controller
@Slf4j
public class HomeController {

    private final List<Customer> customers = new ArrayList<>(3);
    private final Map<String, List<Project>> map = new ConcurrentHashMap<>(3);

    public HomeController() {
        // initialize the list and map
        for (int i = 0; i < 3; i++) {
            final Customer c = new Customer("customer-" + i);
            customers.add(c);
            final List<Project> projects = new ArrayList<>(3);
            for (int j = 0; j < 3; j++) {
                final Project p = new Project("project-" + i + "" + j);
                projects.add(p);
            }
            map.put(c.getName(), projects);
        }

    }

    @GetMapping("/")
    public String index(Model model) {
        log.info("customers : {}", customers);
        model.addAttribute("customers", customers);
        return "index";
    }

    @GetMapping("/{name}")
    public @ResponseBody List<Project> index(@PathVariable("name") String name) {
        final List<Project> projects = map.get(name);
        log.info("projects : {}", projects);
        return projects;
    }
}

$(document).ready(function () {

    $("#selectCustomer").change(function (event) {
        fire_ajax();
    });

});

function fire_ajax() {

    var name = $("#selectCustomer").val();
    
    $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "/"+name,
        dataType:'json',
        cache: false,
        timeout: 600000,
        success: function (data) {
			 var options = "<option selected disabled>select a project</option>"
			 $.each(data, function(index, value) {
			  options += "<option value=\""+value.name+"\">"+value.name+" </option>"
			});
			                
            $('#selectProject').html(options);
            console.log("SUCCESS : ", data);
        },
        error: function (e) {
            console.log("ERROR : ", e);
        }
    });
}

<div id="customers">
				<label>Customer</label> 
				<br/>
				<select class="selectCustomer" id="selectCustomer">
					<option selected disabled>Select a customer</option>
					<option th:each="customer : ${customers}"
						th:value="${customer.name}" th:text="${customer.name}" />
				</select>
			</div>
			<br/>
			<div id="projects">
				<label>What project ?</label> 
				<br/>
				<select	class="selectProject" id="selectProject">
					<option selected disabled>select a project</option>
				</select>
			</div>

Answer 2

你可以像这样使用百里香的if语句作为例子

<div th:if="${condition}> 
<select  th:each="i : ${#numbers.sequence( 1, 81/20)}>
   <option th:text="${ i }"></option>
</select>
</div>

根据第一个选择列表

2 个答案: