关于form：select表单的问题

如果费用明细是多级菜单，例如“交通”下还分为“市内交通”、“车船费”，甚至可能还有第三级交通费类型等等，这时候表单该怎么写？

慕沐8221787 2020-03-17

收起

2回答

好帮手慕小班 2020-03-19 11:11:22

同学你好，基于springmvc的form表单的二级联动与之前的写法是一样的，都是基于ajax获取的对应数据，只是form表的标签可以写为<form:select>标签，<select>标签也是可以正常识别的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            "url" : "/ajax/channel",
            "data" : {"level" : "1"},
            "type" : "get" , 
            "dataType" : "json" , 
            "success" : function(json){
                console.log(json);
                for(var i = 0 ; i < json.length ; i++){
                    var ch = json[i];
                    $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                }
            }
        })
    })
     
    $(function(){
        $("#lv1").on("change" , function(){
            var parent = $(this).val();
            console.log(parent);
            $.ajax({
                "url" : "/ajax/channel" , 
                "data" : {"level" : "2" , "parent" : parent},
                "dataType" : "json" , 
                "type" : "get" ,
                "success" : function(json){
                    console.log(json);
                    //移除所有lv2下的原始option选项
                    $("#lv2>option").remove();
                    for(var i = 0 ; i < json.length ; i++){
                        var ch = json[i];
                        $("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
                    }
                }
            })
        })
    })
 
</script>
</head>
<body>
<form:select id="lv1" style="width:200px;height:30px">
    <option selected="selected">请选择</option>
</form:select>
<form:select id="lv2" style="width:200px;height:30px"></form:select>
</body>
</html>