从两个JS文件附加到HTML附加'onchange'行为

我想说我几乎对html和js几乎一无所知，因为这是我第一次用它开发一些东西。从两个JS文件附加到HTML附加'onchange'行为

它的一部分组成如下：

我要实现它可以让用户选择一个项目名称的下拉菜单。完成后，此项目名称将与变量关联。

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

我发现this帮助我以干净的方式实现下拉菜单。 - 正常情况下，如果该部分直接用html编写，它就可以工作。 - 当我在js中创建它（为了dinamically捕获并创建列表，并将其“附加”到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，这是JS从xml中读取项目名称：

// 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>

来源

2016-11-04 John

与initJumpMenus功能的问题在于，它只会找到select S中的在当时的HTML，所以当你添加更多的菜单编程，它不会为它们添加事件处理程序。

在这种情况下，我建议像这样的东西来代替整个跳转菜单脚本（因为你使用jQuery已经反正）：

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

这会寻找变化中的任何jumpmenu文档和事件处理程序绑定到文档，以便它将捕获将来创建的任何新菜单。

来源

2016-11-04 13:28:42 Dymos

非常感谢你，它完美的作品。 – John

从两个JS文件附加到HTML附加'onchange'行为

回答

相关问题