web-dev-qa-db-ja.com

thymeleaf、スプリングブーツを使用した動的ドロップダウン

3つのドロップダウンがあります（1つは都市、1つは代理店、もう1つはサービス）。 1つの都市を選択した場合、2番目のドロップダウンはデータ（代理店）をロードし、1つの代理店を選択した場合、3つのドロップダウンはデータ（サービス）をロードします。最初のドロップダウン（都市）にデータを入力できますが、2番目と3番目にドロップする方法がわかりません。

各ドロップダウンのコントローラーを作成して値を返す必要がありますか？答えが「はい」の場合、値を返すにはどうすればよいですか？ Thymeleafはコンポーネントテクノロジーではなく、JSPのようなテンプレートテクノロジーであると読みました。したがって、Thymeleafには、クライアント/サーバー通信を行うためのコンポーネントや組み込みメカニズムはありません。だから私はプレーンな古いHTMLフォームを使用して、またはAJAX呼び出しを使用してその通信をプログラミングする必要があります。プレーンな古いHTMLを使用してそれをどのようにプログラミングできますか？

フォームを使用してみましたが、[送信]を1回クリックするだけで、必要なものではありません。ドロップダウンに関する投稿を読みましたが、役立つ情報が見つかりませんでした。 jQueryを使用するのが簡単な方法だと思いましたが、jQueryを知りません。 thymeleafとスプリングブーツのみを使用してこれを行う方法はありますか？ありがとう！以下のコードを投稿します。

appointment.html

<form th:action="@{/appointment/create}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
<div class="form-group">
                <label for="location">Alege orasul:</label>
                <select class="form-control" required="required" 
th:value="${appointment.location}" name="location" id="location">
                    <option disabled="disabled" selected="selected" > -- 
alege orasul --</option>
                    <option th:each="city : ${cities}" th:value="${city.id}" 
th:text="${city.name}" ></option>
            </select>
            </div>
            </form>

            <form th:action="@{/appointment/agency}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
            <div class="form-group">
                <label for="location">Alege agentia:</label>
                <select class="form-control" th:value="${appointment.agency}" name="agency" id="agency" required="required">
                    <option disabled="disabled" selected="selected" > -- alege agentia --</option>
                    <option th:each="agency : ${agencies}" th:value="${agency.id}" th:text="${agency.name}" ></option>

                </select>
            </div>
            </form>
            <form th:action="@{/appointment/service}" method="post" id="appointmentForm">
            <input type="hidden" name="id" th:value="${appointment.id}"/>
            <div class="form-group">
                <label for="location">Alege serviciul:</label>
                <select class="form-control" th:value="${appointment.service}" name="service" id="service" required="required">
                    <option disabled="disabled" selected="selected" > -- alege serviciul --</option>
                    <option th:each="service : ${services}" th:value="${service.id}" th:text="${service.name}" ></option>

                </select>
            </div>
            </form>

AppController.Java

@Controller
@RequestMapping("/appointment")
public class AppointmentController {

@Autowired
UserService userService;    
AppointmentService appointmentService;  
CityService cityService;
AgencyService agencyService;
SerService serService;
private ModelAndView mav;

@RequestMapping(value="/create", method=RequestMethod.GET)
public String createAppointmentPost(Model model, @ModelAttribute("city") City 
city, @ModelAttribute("agency") Agency agency){


    Appointment appointment=new Appointment();
    model.addAttribute("appointment", appointment);
    model.addAttribute("dateString", "");
    model.addAttribute("cities", cityService.findAll());
    //getAllAgencies(model, city);
    getAllServices(model,agency);
    return "appointment";
}

@RequestMapping(value="/agency", method=RequestMethod.GET)
public String getAllAgencies(Model model, @ModelAttribute("city") City city){
    model.addAttribute("agencies", agencyService.listAllAgencies(city));
    return "redirect:/appointment/create";
}
public void getAllServices(Model model, @ModelAttribute("agency") Agency 
agency){
    if(agency==null){
        return;
    }
    model.addAttribute("services", serService.listAllServices(agency));

}
javahtmlspring-bootthymeleaf
8
agata

だから私はjQueryを使ってこれを解決することができました。

ここに便利なリンクがあります： http://www.rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/ 以下のコードを投稿します。

-mycontroller

@RequestMapping(value="/create", method=RequestMethod.GET)
public String createAppointmentPost(Model model, @ModelAttribute("city") City 
city, 
        @ModelAttribute("agency") Agency agency){

    Appointment appointment=new Appointment();
    model.addAttribute("appointment", appointment);
    model.addAttribute("dateString", "");
    model.addAttribute("cities", cityService.findAll());
    return "appointment";
}       

@RequestMapping(value = "/agencies", method = RequestMethod.GET)
public @ResponseBody
List<Agency> findAllAgencies(
        @RequestParam(value = "cityId", required = true) Long cityId) {
    City city = cityService.findCity(cityId);
    return agencyService.listAllAgencies(city);
}

-thymeleaf

<div class="form-group">
    <label for="location">Alege orasul:</label>
    <select  class="form-control" required="required" 
       th:value="${appointment.location}" name="location" id="location">
      <option disabled="disabled" selected="selected" > -- 
      alege orasul --
      </option>
      <option th:each="city : ${cities}" th:value="${city.id}" 
       th:text="${city.name}" >
      </option>
    </select>
</div>

<div class="form-group">
         <label for="location">Alege agentia:</label>
                <select class="form-control" th:value="${appointment.agency}" 
                name="agency" id="agency" required="required">
                    <option disabled="disabled" selected="selected" > --alege 
                    agentia --</option>
                </select>
</div>

jQuery-1つのドロップダウン

 $('#location').change(
        function() {
            $.getJSON("http://localhost:8181/appointment/agencies", {
                cityId : $(this).val(),
                ajax : 'true'
            }, function(data) {
                var html = '<option value="">--alege agentia--</option>';
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                    html += '<option value="' + data[i].nume + '">'
                            + data[i].nume + '</option>';
                }
                html += '</option>';
                $('#agency').html(html);
            });
        });
7
agata