填充選擇菜單+動態菜單添加-HTML / Javascript / Jquery

Question

警告：我不熟悉HTML，JS和一般使用Jquery，所以請不要太殘酷:)

現在，我需要具有三個並排的下拉菜單，分別代表系統配置。 我需要動態添加這些菜單（我已經能夠做到），並且還需要根據用戶為issp版本選擇的內容來填充OS字段的內容。

我已經能夠獨立完成這些工作，但不能一前一后地工作，這使我相信這與div有關。 這就是我的工作。 還應該注意，這是我第一次出現堆棧溢出，因此，如果我在此處包含太多代碼，請告訴我，我可以減少代碼。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script language="javascript" type="text/javascript"> var issp_34 = [ {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.7.4", value: "osx_10.7.4"}, {display: "OSX 10.8.2", value: "osx_10.8.2"}, {display: "OSX 10.9.2", value: "osx_10.9.2"}, {display: "OSX 10.10", value: "osx_10.10"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 5.8", value: "rhel_5.8"}, {display: "RHEL 5.9", value: "rhel_5.9"}, {display: "RHEL 5.10", value: "rhel_5.10"}, {display: "RHEL 5.11", value: "rhel_5.11"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "RHEL 6.3", value: "rhel_6.3"}, {display: "RHEL 6.4", value: "rhel_6.4"}, {display: "RHEL 6.5", value: "rhel_6.5"}, {display: "RHEL 6.6", value: "rhel_6.6"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "SLES 11 sp2", value: "sles11_sp2"}, {display: "SLES 11 sp3", value: "sles11_sp3"}, {display: "RHEL 4 u3", value: "rhel_4_u3"}, {display: "RHEL 4 u7", value: "rhel_4_u7"}]; var issp_32 = [ {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.7.4", value: "osx_10.7.4"}, {display: "OSX 10.8.2", value: "osx_10.8.2"}, {display: "OSX 10.9.2", value: "osx_10.9.2"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 5.8", value: "rhel_5.8"}, {display: "RHEL 5.9", value: "rhel_5.9"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "RHEL 6.3", value: "rhel_6.3"}, {display: "RHEL 6.4", value: "rhel_6.4"}, {display: "RHEL 6.5", value: "rhel_6.5"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "SLES 11 sp2", value: "sles11_sp2"}, {display: "SLES 11 sp3", value: "sles11_sp3"}, {display: "RHEL 4 u3", value: "rhel4_u3"}, {display: "RHEL 4 u7", value: "rhel4_u7"}]; var issp_31 = [ {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.7.4", value: "osx_10.7.4"}, {display: "OSX 10.8.2", value: "osx_10.8.2"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 5.8", value: "rhel_5.8"}, {display: "RHEL 5.9", value: "rhel_5.9"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "RHEL 6.3", value: "rhel_6.3"}, {display: "RHEL 6.4", value: "rhel_6.4"}, {display: "RHEL 6.5", value: "rhel_6.5"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "SLES 11 sp2", value: "sles11_sp2"}, {display: "SLES 11 sp3", value: "sles11_sp3"}, {display: "RHEL 4 u3", value: "rhel4_u3"}, {display: "RHEL 4 u7", value: "rhel4_u7"}]; var issp_30 = [ {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.7.4", value: "osx_10.7.4"}, {display: "OSX 10.8.2", value: "osx_10.8.2"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 5.8", value: "rhel_5.8"}, {display: "RHEL 5.9", value: "rhel_5.9"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "RHEL 6.3", value: "rhel_6.3"}, {display: "RHEL 6.4", value: "rhel_6.4"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "SLES 11 sp2", value: "sles11_sp2"}, {display: "RHEL 4 u3", value: "rhel4_u3"}, {display: "RHEL 4 u7", value: "rhel4_u7"}]; var issp_26 = [ {display: "OSX 10.5.8", value: "osx_10.5.8"}, {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.7.4", value: "osx_10.7.4"}, {display: "OSX 10.8.2", value: "osx_10.8.2"}, {display: "OSX 10.10", value: "osx_10.10"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 5.8", value: "rhel_5.8"}, {display: "RHEL 5.9", value: "rhel_5.9"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "RHEL 6.3", value: "rhel_6.3"}, {display: "RHEL 6.4", value: "rhel_6.4"}, {display: "SLES 10 sp2", value: "sles10_sp4"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "SLES 11 sp2", value: "sles11_sp2"}, {display: "RHEL 4 u3", value: "rhel4_u3"}, {display: "RHEL 4 u7", value: "rhel4_u7"}]; var issp_25 = [ {display: "OSX 10.5.8", value: "osx_10.5.8"}, {display: "OSX 10.6.2", value: "osx_10.6.2"}, {display: "OSX 10.10", value: "osx_10.10"}, {display: "RHEL 5.3", value: "rhel_5.3"}, {display: "RHEL 5.4", value: "rhel_5.4"}, {display: "RHEL 5.5", value: "rhel_5.5"}, {display: "RHEL 5.6", value: "rhel_5.6"}, {display: "RHEL 5.7", value: "rhel_5.7"}, {display: "RHEL 6", value: "rhel_6"}, {display: "RHEL 6.1", value: "rhel_6.1"}, {display: "RHEL 6.2", value: "rhel_6.2"}, {display: "SLES 10 sp2", value: "sles10_sp4"}, {display: "SLES 10 sp3", value: "sles10_sp3"}, {display: "SLES 10 sp4", value: "sles10_sp4"}, {display: "SLES 11", value: "sles11"}, {display: "SLES 11 sp1", value: "sles11_sp1"}, {display: "RHEL 4 u3", value: "rhel4_u3"}, {display: "RHEL 4 u7", value: "rhel4_u7"}]; $("#issp_version").change(function() { var parent = $(this).val(); window.alert("ASD"); switch(parent){ case 'issp_3.3': list(issp_33); break; case 'issp_3.2': list(issp_32); break; case 'issp_3.1': list(issp_31); break; case 'issp_3.0': list(issp_30); break; case 'issp_2.6': list(issp_26); break; case 'issp_2.5': list(issp_25); break; default: $("#os_selection").html(''); break; } }); function list(array_list) { window.alert("ASD"); $("#os_selection").html(""); $(array_list).each(function (i) { $("#os_selection").append("<option value=\\""+array_list[i].value+"\\">"+array_list[i].display+"</option>"); }); } function addSelect(divname, container) { var newDiv=document.createElement('div'); var numDivs=$("#container div").length-1; newDiv.id = 'node' + numDivs; var html='<select name="node_type" id="node_type">'; html+='<option value="" disabled="disabled" selected="selected">Node Type</option>'; html+='<option value="con">CON</option>'; html+='<option value="scn">SCN</option>'; html+='<option value="mds">MDS</option>'; html+='</select>'; html+='<select name="issp_version" id="issp_version">'; html+='<option value="" disabled="disabled" selected="selected">ISSP/CXFS Version</option>'; html+='<option value="stout7">stout7/cxfs-Dev</option>'; html+='<option value="issp_3.4">ISSP 3.4/CXFS 7.4</option>'; html+='<option value="issp_3.3">ISSP 3.3/CXFS 7.3</option>'; html+='<option value="issp_3.2">ISSP 3.2/CXFS 7.2</option>'; html+='<option value="issp_3.1">ISSP 3.1//CXFS 7.1</option>'; html+='<option value="issp_3.0">ISSP 3.0/CXFS 7.0</option>'; html+='<option value="issp_2.6">ISSP 2.6/CXFS 6.6</option>'; html+='<option value="issp_2.5">ISSP 2.5/CXFS 6.5</option>'; html+='</select>'; html+='<select name="os_selection" id="os_selection">'; html+='<option value="" disabled="disabled" selected="selected">Operating System</option>'; html += '</select><br></br>'; newDiv.innerHTML= html; document.getElementById(divname).appendChild(newDiv); } </script> 

 <body><b>Virtual Cluster Initialization</b><br></br> <div id="container"> <div id="general"> <form>Cluster name:<br> <input type="text" name="cluster_name"> <br> Host Machine:<br> <input type="text" name="host_machine"> </form> </div> <div id="nodes"></div> <button id="add" onclick="addSelect('nodes','container');">+</button> </div> </body> 

Answer 1

分析代碼后，問題是

$("#issp_version").change() function

因為您正在將功能定義分配給元素，但是該元素尚不存在。 您可以將函數$（“＃issp_version”）。change（）添加到addSelect函數中，但是當您添加新VM（在添加按鈕中多次單擊）時， Id = os_selection不是唯一的，因此您需要以其他方式解決這個問題

問候。

Answer 2

感謝您的指導。 我最終給每個os_selection一個唯一的ID，然后將$("#issp_version").change() function重寫為一個常規函數，可以通過在每個issp_version選擇上添加onchange = callFunction來調用該函數。