javascript - 修复从两个 JS 文件附加到 HTML 的 'onchange' 行为

我想说我对 html 和 js 几乎一无所知，因为这是我第一次用它来开发东西。

其一部分组成如下:

我必须实现一个下拉菜单，让用户选择项目名称。完成此操作后，该项目名称将与一个变量相关联。

为了加载项目名称列表，我检查了 xml 文件，并将名称保存在数组中。

我找到了this帮助我以干净的方式实现下拉菜单。 - 通常，如果该部分直接用 html 编写，则可以正常工作。 - 当我在 js 中创建它时(动态地捕获并创建列表，并将其“附加”到 html 中，它不尊重通常情况下的“onchange”行为。

如果您知道更简单的方法，请告诉我。在这种情况下，我仍然很好奇让我编写的代码能够工作。

如果您需要更多信息，请告诉我。

约翰。

编辑: 我忘了说在 menu.js 中确定的值必须返回到 prjget.js 中。我正在互联网上搜索如何使用某些内容作为 C 的“返回”，以及如何读取该值。如果你们知道一些事情，请感谢您的帮助。

<小时/>

HTML，这是 html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load XML With jQuery</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script src="menu.js"></script>
    <script src="prjget.js"></script>
    //Working test
    <select id="PrjLst2" class="jumpmenu">
        <option value="">-- Elenco Progetti --</option>
        <option value="http://google.com/">Google html</option>
    </select>
    //Working test
    <select onchange="if( this.options[this.selectedIndex].value != '' ) location.href=this.options[this.selectedIndex].value;">
        <option value=""></option>
        <option value="http://google.com/">Google</option>
        <option value="http://yahoo.com/">Yahoo!</option>
        <option value="http://ask.com/">Ask.com</option>
    </select>

</head>
<body>
</body>
</html>

menu.js，这是格式化程序js:

// This JS file handles menù behaviour (i.e.: onmouseover, onmouseout, onclick)
function initJumpMenus() {
    // Turns all <select> elements with the 'jumpmenu' class into jump menus
    var selectElements = document.getElementsByTagName("select");
    for( i = 0; i < selectElements.length; i++ ) {
        // Check for the class and make sure the element has an ID
        if( selectElements[i].className == "jumpmenu" && document.getElementById(selectElements[i].i ) != "" ) {
            jumpmenu = document.getElementById(selectElements[i].id);
            jumpmenu.onchange = function() {
                if( this.options[this.selectedIndex].value != '' ) {
                    // Redirect
                    location.href=this.options[this.selectedIndex].value;
                }
            }
        }
    }
}

window.onload = function() {
    initJumpMenus();
}

prjget.js，这是从xml中读取项目名称的JS:

// Caricamento Elenco Progetti + Creazione Menu Tendina
    $(document).ready(function(){
        $.get('projects.xml', function(read_prj_name){
            $('body').append('<h1> Elenco Progetti </h1>');
            $('body').append('<dl />');

            var PrjLst = new Array();
            var PrjIndx = 0;

            $(read_prj_name).find('project').each(function(){
                //Prelevo il titolo del Progetto
                var $prj = $(this);
                var dataProj = $prj.find("name").text();
                //Popolo un vettore con tutti i riferimenti di Progetto
                PrjLst.push(dataProj);
            });

            //stampo il menu a tendina per la selezione dei progetti
            var html = '<p> ' + PrjLst[PrjLst.length-1] + '</p>';
                html += '<select id="PrjLstMenu" class="jumpmenu">';
                html += '<option value="">-- Elenco Progetti --</option>';
                //ciclo While per indice Progetto
                while(PrjIndx <= PrjLst.length-1){
                    html += '<option value="' + PrjLst[PrjIndx] + '">' + PrjLst[PrjIndx] + '</option>';
                    PrjIndx++;
                };
            html += '<option value="http://google.com/">Google JS</option>';
            html += '</select>';

            $('dl').append($(html));
        });
    });

XML 格式如下:

<projectEnts>
    <project>
        <displayStatus>Pronto</displayStatus>
        <name>TEST_API</name>
        ...
    </project>
    <project>
        <displayStatus>Pronto</displayStatus>
        <name>TEST_03</name>
        ...
    </project>
    <project>
        <displayStatus>Pronto</displayStatus>
        <name>TEST_02</name>
        ...
    </project>
</projectEnts>

最佳答案

initJumpMenus 函数的问题在于，它只能找到当时 HTML 中的 select，因此当您以编程方式添加更多菜单时，它不会为它们添加事件处理程序。

在这种情况下，我建议将整个跳转菜单脚本替换为类似的内容(因为无论如何您已经在使用 jQuery):

$(function(){
    $(document).on('change', '.jumpmenu', function(e) {
        window.location.href = $(this).val();
    });
});

这将查找文档中任何跳转菜单的更改，并且事件处理程序绑定(bind)到文档，以便它也将捕获将来创建的任何新菜单。

关于javascript - 修复从两个 JS 文件附加到 HTML 的 'onchange' 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40423684/

javascript - 修复从两个 JS 文件附加到 HTML 的 'onchange' 行为

上一篇：javascript - AngularJs ui-router ui-sref 未使用参数从嵌套状态生成 href

下一篇：javascript - 如何添加 Croppie 结果上传 php 并将结果传递到其他 php 页面