Jquery dynamic action drop-down list (s:select)

Project background: Struts2 + Jquery -3.3.1.js

Project requirements: When the page is initialized, the list of provinces and cities is read from the Action side of Struts2 into the List variable, a list of provinces and a list of each city. When selecting a province on the screen ( JSP ), the city needs to be associated with changes, that is, it is displayed as the city under the jurisdiction of each province.

Note: AJAX and JSON are not used in the project, so there is no real dynamic.

Thoughts: The design is a bit strange, and it can be achieved with a List. I tried to store the list (List) in the hidden field (s:hidden), when using Jquery to read, the object class name is taken out, and the object content cannot be taken. Then the list (List) is directly stored in the hidden drop-down list (s: select ), and Jquery is used to dynamically generate the content in the city drop-down list according to the selected province.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#selProvince').change(function(){
    	if($(this).val() == "1"){
    		var selCity = $('#selCity0 option');
    	}else if($(this).val() == "2"){
    		var selCity = $('#selCity1 option');
    	}else if($(this).val() == "3"){
            var selCity = $ ('# selCity2 option');
        }
    	
    	setselCity(selCity);
    });
});
function setselCity (selProvince) {
	$('#selCity').empty();
	$('#selCity').append("<option></option>");
	selProvince.each(function(){
        var option = "<option value='" + $(this).val() + "'>" + $(this).text(); + "</option>";
        $('#selCity').append(option);
    });
}
</script>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <colgroup>
            <col style="width:60px;text-align:right;">
            <col style="width:150px;text-align:left;">
            <col style="width:60px;text-align:right;">
            <col style="width:150px;text-align:left;">
        </colgroup>
        <tr>
            <td>province</td>
            <td>
                <s:select theme="simple" id="selProvince" name="selProvince" list="#{'':'','1':'Liaoning','2':'Jilin','3': 'Heilongjiang'}" />
            </td>
            <td>市</td>
            <td>
                <s:select theme="simple" id="selCity" name="selCity" list="#{}"></s:select>
            </td>
        </tr>
    </table>
    <s:select style="display:none" id="selCity0" name="selCity0" list="#{'1':'沈阳','2':'大连','3':'营口'}"></s:select>
    <s:select style="display:none" id="selCity1" name="selCity1" list="#{'1':'长春','2':'吉林','3':'延吉'}"></s:select>
    <s:select style="display:none" id="selCity2" name="selCity2" list="#{'1':'Harbin','2':'Qiqihar','3':'Mohe'} "></s:select>
</body>
</html>

Jquery dynamic action drop-down list (s:select)

Guess you like