Get value of dropdown in JSP and load other contents depending on the value selected

Question

I have a JSP page, which has a list of dropdown items. I am populating this dropdown with a request attribute of list type and looping through that one.

<select class="form-control" id="groupname" name="groupname">
    <c:forEach items="${visibility}" var="groupListItem">
        <option value="${groupListItem.groupName}">${groupListItem.groupName}</option>
    </c:forEach>
</select>

Whenever I select an item from the dropdown, I need to display a list of checkboxes on the same page. The label and checked/unchecked values of the checkboxes are also part of the list attribute, groupListItem.

The list attribute is a custom bean which has a map with checkbox names and values which decide if checked or unchecked.

How can I get the values for checkboxes when a drop down value is selected?

My list attribute looks like below.

List<GroupVisibilityBean> groupList = driverDAO.getGroupVisibility();
model.addAttribute("visibility", createGroup());

private List<GroupVisibilityBean> createGroup() {
    List<GroupVisibilityBean> groupList = new ArrayList<GroupVisibilityBean>();

    GroupVisibilityBean bean1 = new GroupVisibilityBean();
    bean1.setGroupName("GARDA");
    Map<String, String> map1 = new HashMap<String, String>();
    map1.put("Personal Details", "Y");
    map1.put("Driver Details", "N");

    GroupVisibilityBean bean2 = new GroupVisibilityBean();
    bean2.setGroupName("COURT");
    Map<String, String> map2 = new HashMap<String, String>();
    map2.put("Personal Details", "Y");
    map2.put("Driver Details", "N");

    groupList.add(bean1);
    groupList.add(bean2);

    return groupList;
}

Can someone please help me here?

Answer 1

1. You probably need to add the created map1 and map2 to your bean1 and bean2, respectively. Right now, they are assigned values, but you do not have a call like

   bean1.setCheckboxMap(map1);
   

   which might be needed to help bean1 access map1 etc.

2. When you have the values in the bean, you need to put them into the HTML page. Easiest way to do this would be (f.ex. below the <option> in your foreach)

   <script>
     ${groupListItem} = {}; // create object of that name
     <c:forEach items="${groupListItem.checkboxMap}" var="mapItem">
         ${groupListItem}["${mapItem.key}"] = "${mapItem.value}"; // set val
     </c:forEach>
   </script>
   

   Instead of using the key as the key of the JS object, you can store the bean values inside a JS array, as in

   <script>
     ${groupListItem} = {}; // create object of that name
     ${groupListItem}.keys = [];
     ${groupListItem}.values = [];
     <c:forEach items="${groupListItem.checkboxMap}" var="mapItem">
         ${groupListItem}.keys.push("${mapItem.key}"); // append key
         ${groupListItem}.values.push("${mapItem.value}"); // append value
     </c:forEach>
   </script>
   

   see also how-to-iterate-an-arraylist-inside-a-hashmap-using-jstl. If you want to have a bit more effort, encode it in JSON, as in reading-a-jsp-variable-from-javascript.

3. If the values are in HTML, you need to either alter the checkboxes or create them on the fly via Javascript when the dropdown is altered. For detecting the dropdown event, see dropdown-using-javascript-onchange.