struts2: cập nhật lựa chọn thứ hai dựa trên giá trị lựa chọn đầu tiên sử dụng javascript và jquery

Question

Tôi đang làm việc trên dự án struts2 nơi tôi có 3 điều khiển chọn html mỗi tùy thuộc vào lựa chọn trước đó. Giả sử lựa chọn đầu tiên là cho quốc gia, thứ hai cho tiểu bang, thứ ba cho thành phố. Danh sách các tùy chọn trong trạng thái chọn sẽ được lọc để chỉ hiển thị các trạng thái ở quốc gia đó, v.v. Do một số hạn chế khác, tôi đang sử dụng điều khiển chọn html cơ bản thay vì của struts2. Dưới đây là một ví dụ về cách tôi hiện đang populating chọn:

<select id="stateSelect" name="selectedState"> 
<s:iterator value="#session['myModel'].states" status="itr"> 
    <option value="<s:property value="code"/>"> 
     <s:property value="label"/> 
</option> 
</s:iterator> 
</select> 

Tôi nghĩ rằng những gì tôi cần làm là onchange kiện làm một cuộc gọi ajax để lấy danh sách các "quốc gia" dựa trên "đất nước" được chọn . Các câu hỏi là:
1. làm thế nào tôi có thể thực hiện cuộc gọi ajax này bằng jquery?
2. Tôi cần truyền thông tin gì cho url của cuộc gọi ajax? chỉ là tên hành động?
3. làm cách nào để phân tích cú pháp kết quả? Từ mã java tôi có thể trả về một danh sách các đối tượng "Trạng thái" có "mã" và "nhãn" và các thuộc tính khác. Làm cách nào để phân tích cú pháp danh sách này trong javascript và tạo các tùy chọn thích hợp cho thẻ chọn?

Answer 1

<select id="stateSelect" name="selectedState" onchange="loadCities(this.value)"> 
<s:iterator value="#session['myModel'].states" status="itr"> 
    <option value="<s:property value="code"/>"> 
     <s:property value="label"/> 
</option> 
</s:iterator> 
</select> 

<select id="citySelect" name="selectedCity" > 
</select> 

JQuery

function loadCities(value){ 

     $("#citySelect").get(0).options.length = 0; 
     $("#citySelect").get(0).options[0] = new Option("Loading cities", "-1"); 

     $.ajax({ 
      type: "POST", 
      url: "MyStrutsActionToGetCities", 
      data: "{stateID:" + value+ "}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#citySelect").get(0).options.length = 0; 
       $("#citySelect").get(0).options[0] = new Option("Select city", "-1"); 

       $.each(msg.d, function(index, item) { 
        $("#citySelect").get(0).options[$("#citySelect").get(0).options.length] = new Option(item.Display, item.Value); 
       }); 
      }, 
      error: function() { 
       $("#citySelect").get(0).options.length = 0; 
       alert("Failed to load cities"); 
      } 
     }); 
} 

Taken từ this tutorial

Cập nhật: Ví dụ này được sử dụng để tải danh sách thành phố dựa trên trạng thái được chọn. Bạn có thể làm điều tương tự để tải danh sách trạng thái về lựa chọn quốc gia. Ngoài ra here is a link mô tả yêu cầu/phản hồi ajax cho thanh chống mà không cần sử dụng bất kỳ plugin nào

Answer 2

Nói chung, cách thực hiện việc này là sử dụng Struts2 JSON plugin có các phiên bản Struts2 gần đây. Để tương tác với jQuery trong JSP của bạn, bạn sẽ muốn sử dụng s: url để tạo một URL cho hành động JSON của bạn và sau đó bạn có thể gọi nó bằng cách sử dụng jQuery .getJSON() hoặc .load().

Tuy nhiên, nếu lựa chọn thả xuống của bạn thực sự không phức tạp, đừng quá kiến ​​trúc sư. Có thể dễ dàng hiển thị tất cả chúng bằng cách sử dụng s: iterator trên tải trang ban đầu và sử dụng .change() trên hộp thả xuống của bạn để di chuyển dữ liệu giữa các thành phần được chọn hoặc tăng thêm thuộc tính tên trên một trong các hộp chọn để gửi biểu mẫu.