Question

我正在开发一个网页，其中有一个标签，取决于交易中的人数。因为它可以是1个交易，3个交易，我使用循环索引动态创建了下拉项目。

<tr>
        <td align="right">
             <spring:messagecode="label.borrower.employer.status" />:
        </td>
        <td align="right">
             <kendo:dropDownList name="employmentStatus${requestScope.loopIndex}"
                dataTextField="text" dataValueField="value" style="width: 100%;"
                select="employmentStatusOnClick(${requestScope.loopIndex})" 
                change="updateEmploymentInfo">
                       <kendo:dataSource data="${borrowerEmploymentStatus}"></kendo:dataSource>
            </kendo:dropDownList>
       </td>

我可以根据交易中的人数查看下拉列表。但是，这个jsp包含在另一个主jsp中，“change”和“select”函数位于主jsp中。当在下拉列表中选择一个值时，我想捕获它然后执行一些操作。

<script>
function employmentStatusOnClick(index) {
    console.log(exp.loopCounter);
    console.log("counter: "+index);

    var employmentStatusVal = $("#employmentStatus"+index).data(
            "kendoDropDownList").text();

    console.log(employmentStatusVal);
}
</script>

对于输出，我可以看到索引的值正确。但是，即使在页面完全加载之前，我也会收到错误“ TypeError：无法读取未定义的属性'文本'”

到目前为止我尝试过的事情： 1）试图在ready（）函数中添加脚本，但它然后给我一个错误，就是没有定义employmentStatusOnClick

2）尝试将索引值与下拉列表的基本名称连接起来的不同变体

3）尝试将值传递给变量，然后将其放入.text（）函数

4）最新，我甚至尝试将index的值硬编码为0以查看它是否适用于第一种情况，但我仍然得到未定义的错误。

我怀疑它必须对元素的加载做些什么。出于某种原因，它甚至在生成元素名称之前尝试运行此代码。我与朋友讨论过，他建议我删除选择的事件，而只是使用更改事件。试过......没效果。

现在，我打算删除kendo下拉菜单，只使用javascript下拉列表作为最后的手段。你能否说一下可能出现的问题？

更新 - 来自浏览器的div的HTML代码：

<div id="tab-employment">
<table>
    <tbody><tr>
        <td>
            <table border="1">
                <tbody><tr>
                    <th>Employer Name</th>
                    <th>Occupation</th>
                    <th>Employment Status</th>
                    <th>Hiring Date</th>
                </tr>

                    <tr align="center">
                        <td>Roagres</td>
                        <td>Assistant</td>
                        <td>Current</td>
                        <td>2018-03-12 11:59:06.0</td>
                    </tr>

            </tbody></table>
        </td>
        <td style="width: 1%"></td>
        <td>
            <table style="display: inline-block;">
                <tbody><tr>
                    <td align="right">Employment Status:</td>
                    <td align="right"><input name="employmentStatus0" style="width: 100%;" id="employmentStatus0"><script>jQuery(function(){jQuery("#employmentStatus0").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":employmentStatusOnClick(0),"dataSource":{"data":[{"text":"--Select--","value":"--Select--"},{"text":"Employed","value":"Employed"},{"text":"Self-Employed","value":"Self-Employed"},{"text":"Retired","value":"Retired"},{"text":"Seasonal","value":"Seasonal"},{"text":"Student","value":"Student"},{"text":"Unemployed","value":"Unemployed"},{"text":"TEST","value":"TEST"}]}});})</script></td>
                </tr>
                <tr>
                    <td align="right">Industry Sector:</td>
                    <td align="right"><input name="industryStatus" style="width: 100%;" id="industryStatus"><script>jQuery(function(){jQuery("#industryStatus").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":industryStatusOnClick,"value":"1","dataSource":{"data":[{"text":"--Select--","value":"8443"},{"text":"Agriculture/Fishing/Forestry/Mining","value":"8444"},{"text":"Food/Foodservice/Hospitality","value":"8445"},{"text":"Arts/Entertainment/Recreation/Sports","value":"8446"},{"text":"Insurance, Accounting and Banking","value":"8447"},{"text":"Design/Creative","value":"8448"},{"text":"Construction & Skilled Trades","value":"8449"},{"text":"Education and Training","value":"8450"},{"text":"Government/Public Administration","value":"8451"},{"text":"Engineering/Architecture","value":"8452"},{"text":"Manufacturing/Production/Operation","value":"8453"},{"text":"Medical and Healthcare","value":"8454"},{"text":"Media/Telecommunication/Communication","value":"8455"},{"text":"Religion","value":"8456"},{"text":"Legal Services","value":"8457"},{"text":"Emergency and Protection","value":"8458"},{"text":"Real Estate","value":"8459"},{"text":"Professional, Scientific, and Technical Services","value":"8460"},{"text":"Information Technology","value":"8461"},{"text":"Transportation and Utilities","value":"8462"},{"text":"Sales/Marketing/Retail","value":"8463"}]}});})</script></td>
                </tr>
                <tr>
                    <td align="right">Express Occupation:</td>
                    <td align="right"><input name="expressOccupation" style="width: 100%;" id="expressOccupation"><script>jQuery(function(){jQuery("#expressOccupation").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":expressOccupationOnClick,"value":"1"});})</script></td>
                </tr>
                <tr>
                    <td align="right">Other - Specify:</td>
                    <td align="right"><input type="text" id="otherSpecify" name="otherSpecify" disabled="disabled" class="k-textbox" style="width: 100%;"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="empStatusMsg" style="margin: 0 0 0 0; color: red; width: 300px; float: right;"></div>
                    </td>
                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>

Answer 1

所以伙计们，最后我能够弄清楚这一点。似乎问题与kendo标记库或至少我的实现有关。在页面加载之前，更改事件正在被激活。

因此，我从kendo标记定义中删除了change事件，而是使用嵌套在document.ready（）中的change事件的jquery。在此之后它开始正常工作。

无法访问动态生成的下拉列表项。它来自未定义

1 个答案: