Select 后面再增加个Select问题，在线等，告急！！！

我是小小小小程序媛 2014-08-11 03:38:25

问题：在页面里，我想在一个select选项后面通过JS动态地再添加一个或一个以上的select选项。可每次执行完JS代码后，select这个对象是添加进去了，可里面没有选项。

运行完JS后的效果图：

JS代码如下：



var i=1;

function add()

{

	var j=i-1;

	var tagname="project_contractor"+j;	

	var id="project_contractor"+i;

	

	var head="<select class='InputStyle' name='project_contractor' id='"+id+"'><option value='0'>请选择</option>";

	var project_no=document.getElementById(tagname);

	var project_noIndex=project_no.selectedIndex;

	var project_noValue=project_no.options[project_noIndex].value;

	

	if(project_noValue==0)

	{

		alert("上一未选择,不需再增加！");

		return false;

	}

	

	$.ajax( {  

	 	type: "POST",  //提交方式 

        url : 'customerSerch.bia', //提交路径	        

        success : function(data) {	        	

        	var json=eval('(' + data + ')');

        	for(var i=0;i<json.length;i++){

        		head+="<option value='"+json[i].customer_no+"'>"+json[i].customer_name+"</option>";

        	}

        	var br = document.createElement("<br />");

            var Selects = document.getElementById("project_contractorSelect");

            Selects.appendChild(br);

            alert(head+"</select>");

            Selects.appendChild(document.createElement(head+"</select>"));

        },  

        error : function() {  

          alert("系统报错，稍后重试！");  

        }	        

	});

	

    i++;		

}

声明：Ajax方法执行成功，后台数据取出成功。

这个问题折腾一天了，求大神解答。

...全文

522 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

我是小小小小程序媛 2014-08-11

打赏
举报

经过测试，是五楼这位兄弟的解法正确，当然也谢谢各位的悉心指导，感谢各位了。作为学习和共享，我也贴出我修改后的JS代码：


var i=1;
function add()
{
	var j=i-1;
	var tagname="project_contractor"+j;	
	var id="project_contractor"+i;
	
	var project_no=document.getElementById(tagname);
	var project_noIndex=project_no.selectedIndex;
	var project_noValue=project_no.options[project_noIndex].value;
	if(project_noValue==0)
	{
		alert("上一未选择,不需再增加！");
		return false;
	}
	
	var sel=document.createElement("<select class='InputStyle' name='project_contractor' id='"+id+"'>");
	
	$.ajax( {  
	 	type: "POST",  //提交方式 
        url : 'customerSerch.bia', //提交路径	        
        success : function(data) {	        	
        	var json=eval('(' + data + ')');
        	for(var i=0;i<json.length;i++){
        		sel.options[i] = new Option(""+json[i].customer_name+"", ""+json[i].customer_no+"");
        	}
        	var br = document.createElement("<br />");
            var Selects = document.getElementById("project_contractorSelect");
            Selects.appendChild(br);
            Selects.appendChild(sel);
        },  
        error : function() {  
          alert("系统报错，稍后重试！");  
        }	        
	});
	
    i++;		
}

我是小小小小程序媛 2014-08-11

打赏
举报

引用 7 楼 shixitong 的回复:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function add(){
	var selects=$("#selects");
	var select="<select><option value=''>请选择</option></select>";
	selects.append(select);
}
</script>
</head>

<body>
<input type="button" onclick="add()" value="增加">
<div id="selects">
</div> 
</body>
</html>

测试的

也不成，好屌。

拯救司马 2014-08-11

打赏
举报

1、首先点开浏览器F12开发者工具，查看你新增的select那段代码里面是否有option元素，可能是option元素在组装时因为不符合标准所以未能正常显示。 2、如果第一步并没有找到Option元素，就查看你的代码逻辑，for循环是否进入了，在for循环里面添加标记。 PS,调试JS推荐用console.log()代替alert() 前者会在浏览器的控制台打印信息，不会弹出对话框阻断程序运行

我是小小小小程序媛 2014-08-11

打赏
举报

引用 8 楼 rui888 的回复:

调试看看数据对不

数据时没有问题的。

tony4geek 2014-08-11

打赏
举报

调试看看数据对不

shixitong 2014-08-11

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function add(){
	var selects=$("#selects");
	var select="<select><option value=''>请选择</option></select>";
	selects.append(select);
}
</script>
</head>

<body>
<input type="button" onclick="add()" value="增加">
<div id="selects">
</div> 
</body>
</html>

测试的

shixitong 2014-08-11