文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >填充选择菜单+动态菜单添加- HTML/Javascript/Jquery

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

Stack Overflow用户
提问于 2015-06-08 22:14:51
回答 2查看 33关注 0票数 0

警告:我对HTML、JS和一般使用Jquery都很陌生，所以请不要太残忍:)

现在，我需要有三个并排下拉菜单，代表系统配置。我需要动态添加这些菜单(我一直能够这样做)，并根据用户为issp版本选择的内容填充OS字段的内容。

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

​

代码语言：javascript
复制
<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>
代码语言：javascript
复制
<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>

​

javascript
jquery
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-08 22:56:23

在分析代码之后，问题是

代码语言：javascript
复制
$("#issp_version").change() function

因为您将函数定义分配给一个元素，但是这个元素还不存在。您可以将函数$("#issp_version").change()添加到addSelect函数中，但是当您添加新VM时(在add Button中多次单击)，Id=os_selection并不是唯一的，因此您需要以其他方式解决这个问题

致以问候。

票数 0
EN

Stack Overflow用户

发布于 2015-06-09 15:17:09

谢谢你的指点。最后，我给了每个os_selection一个唯一的ID，然后将$("#issp_version").change() function重写为一个常规函数，通过在每个issp_version选择中添加一个onchange=callFunction来调用该函数。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/30719993

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档