Question

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

现在我需要有三个并排下拉菜单，代表系统配置。我需要动态添加这些菜单（我已经能够做到），并且还要根据用户为issp版本选择的内容填充操作系统字段的内容。

我已经能够让这些东西独立工作，但不是串联导致我相信它与div有关。这就是我正在做的事情。还应该注意这是我第一次在堆栈溢出时，所以如果我在这里包含太多代码，请告诉我，我可以减少。

＆＃13;

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

＆＃13;

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

＆＃13;

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来调用。

填充选择菜单+添加动态菜单 - HTML / Javascript / Jquery

2 个答案: