关于form：select表单的onchange事件问题

同学你好，动态添加的元素需要添加上change事件，才可以在动态添加的标签中获取到二级菜单的内容。

    1、首先老师尝试将两个菜单的内容按照如下形式书写：

    2、我们可以尝试将事件绑定在父元素上，比如：

这样先增加的才能够有change事件，查看被选择的元素和需要赋值的元素的特点，有一个2的区别：

然后对应可以使用name选择器来进行对应赋值的操作：

就实现了动态添加的元素上实现的change事件的赋值。

修改后的claim_voucher_add.jsp代码如下：

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="top.jsp"/>

<section id="content" class="table-layout animated fadeIn">
    <div class="tray tray-center">
        <div class="content-header">
            <h2> 填写报销单 </h2>
            <p class="lead"></p>
        </div>
        <div class="admin-form theme-primary mw1000 center-block" style="padding-bottom: 175px;">
            <div class="panel heading-border">
                <form:form id="admin-form" name="addForm" action="/claim_voucher/add" modelAttribute="info">
                    <div class="panel-body bg-light">
                        <div class="section-divider mt20 mb40">
                            <span> 基本信息 </span>
                        </div>
                        <div class="section">
                            <label for="claimVoucher.cause" class="field prepend-icon">
                                <form:input path="claimVoucher.cause" cssClass="gui-input" placeholder="事由..."/>
                                <label for="claimVoucher.cause" class="field-icon">
                                    <i class="fa fa-lock"></i>
                                </label>
                            </label>
                        </div>
                        <div class="section-divider mt20 mb40">
                            <span> 费用明细 </span>
                        </div>
                        <div class="section row" id="items">
                            <div>
                                <div class="col-md-3">
                                    <label for="items[0].item" class="field prepend-icon ">
                                        <form:select  path="items[0].item" cssClass="gui-input items0" placeholder="花销类型..." items="${items}"/>
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label for="items[0].item2" class="field prepend-icon">
                                        <form:select id="items[0].item2" path="items[0].item2" cssClass="gui-input" placeholder="花销类型2..."/>
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <label for="items[0].amount" class="field prepend-icon">
                                        <form:input path="items[0].amount" cssClass="gui-input money" placeholder="金额..."/>
                                        <label for="items[0].amount" class="field-icon">
                                            <i class="fa fa-lock"></i>
                                        </label>
                                    </label>
                                </div>
                                <div class="col-md-5">
                                    <label for="items[0].comment" class="field prepend-icon">
                                        <form:input path="items[0].comment" cssClass="gui-input" placeholder="备注..."/>
                                        <label for="items[0].comment" class="field-icon">
                                            <i class="fa fa-lock"></i>
                                        </label>
                                    </label>
                                </div>
                                <div class="col-md-1" style="text-align:right;">
                                    <button type="button" class="button"> X </button>
                                </div>
                            </div>
                        </div>
                        <div class="section row">
                            <div class="col-md-3">
                                <label for="totalMoney" class="field prepend-icon">
                                    <form:input id="totalMoney" path="claimVoucher.totalAmount" cssClass="gui-input" placeholder="总金额..." readonly="true"/>
                                    <label for="totalMoney" class="field-icon">
                                        <i class="fa fa-user"></i>
                                    </label>
                                </label>
                            </div>
                            <div class="section" style="text-align:right;">
                                <div class="col-md-9">
                                    <button type="button" class="button" id="addItemButton"> + </button>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer text-right">
                            <button type="submit" class="button"> 保存 </button>
                            <button type="button" class="button" onclick="javascript:window.history.go(-1);"> 返回 </button>
                        </div>
                    </div>
                </form:form>
            </div>
        </div>
    </div>
</section>

<jsp:include page="bottom.jsp"/>
<script type="text/javascript" >
    
</script>

修改后的items如下：

$(document).ready(function(){
    builderIndex();
    calculateMoney();
    $("#addItemButton").click(
        function(){
            $("#items").children("div").last().after($("#items").children("div").first().clone());
            $("#items").children("div").find("button").click(
                function(){
                    $(this).parent().parent().remove();
                    if($("#items").children("div").size()==1){
                        $("#items").find("button").attr("disabled",true);
                    }
                    builderIndex();
                    calculateMoney();
                }
            );
            $("#items").find("button").attr("disabled",false);
            builderIndex();
            $(".money").change(
                function(){
                    calculateMoney();
                }
            );
            calculateMoney();
        }
    );
    $(".money").change(
        function(){
            calculateMoney();
        }
    );
});// JavaScript Document

function builderIndex(){
    $.each($("#items").children(),function(i,val){
        $("#items").children("div").eq(i).children().eq(0).find("select").attr("name","items["+i+"].item");
        /*添加子菜单的class*/
        $("#items").children("div").eq(i).children().eq(1).find("select").attr("name","items["+i+"].item2");
        $("#items").children("div").eq(i).children().eq(2).find("input").attr("name","items["+i+"].amount");
        $("#items").children("div").eq(i).children().eq(3).find("input").attr("name","items["+i+"].comment");

    });
}
/*实现对应的change事件*/
$("#items").on("change", ".items0", function(e){
   
    var doc=e.currentTarget;
    var varname=$(doc).attr("name")+2;//获取到子菜单的name，
    var first_menu=$(this).val();
    alert(first_menu);
    $.ajax({
        url:"/claim_voucher/cascade",
        type:"get",
        data: {"first_menu":first_menu},
        dataType:"json",
        success:function (json) {
            for(var i=0;i<json.length;i++){
                console.log(json[i]);
                /*对子菜单进行赋值*/
                $("[name='"+varname+"']").append("<option value='"+json[i]+"'>"+json[i]+"</option>");
            }
        }
    })

});

function calculateMoney(){
    var totalMoney=0;
    $.each($(".money"),function(i,val){
        totalMoney+=parseFloat($(".money").eq(i).val());
    });
    $("#totalMoney").attr("value",totalMoney);
}

        3、最后同学还有一个小问题，如果切换菜单的话应该将之前的二级菜单删除再新增，否则会一直叠加，这个内容同学可以参考之前二阶段中登录注册功能章节的内容，在向元素添加查询结果之前，先删除原有的内容，再来添加。这个功能同学可以自己实现一下。

如上就是老师的小例子，同学可以参考着自己实现一下。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~