Question

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

其中一部分组成如下：

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

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

我找到this来帮助我以干净的方式实现下拉菜单。 - 通常情况下，如果该部分直接用html编写，则可以正常工作。 - 当我在js中创建它时（以恐怖方式捕获并创建列表，并且将它附加到html中，它不会尊重它通常所做的“改变”行为）

如果您知道更简单的方法，请告诉我。在这种情况下，我仍然很想知道我写的代码。

如果您需要更多信息，请与我们联系。

约翰。

编辑：我忘了说menu.js中确定的值必须返回prjget.js。我在互联网上搜索如何使用C＆＃39;返回＆＃39;以及如何阅读此值。如果你们知道一些事情，请感谢你的帮助。

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>

Answer 1

let e = new Employee(); Object.assign(e, { "department": "<anystring>", "typeOfEmployee": "<anystring>", "firstname": "<anystring>", "lastname": "<anystring>", "birthdate": "<anydate>", "maxWorkHours": 3, "username": "<anystring>", "permissions": "<anystring>", "lastUpdate": "<anydate>" });功能的问题在于它只会找到当时HTML中的initJumpMenus，因此当您以编程方式添加更多菜单时，它不会有为他们添加了事件处理程序。

在这种情况下，我建议用这样的东西替换整个跳转菜单脚本（因为你还在使用jQuery）：

select

这将查找文档中任何jumpmenu的更改，并且eventhandler绑定到文档，以便它还将捕获将来创建的任何新菜单。

修复＆＃39; onchange＆＃39;从两个JS文件追加到HTML的行为

1 个答案: