记录ing---《一》

最新推荐文章于 2024-11-10 00:12:00 发布

原创最新推荐文章于 2024-11-10 00:12:00 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了处理动态生成Checkbox时获取正确值的方法及避免下拉框重复选项的技巧。针对Checkbox默认值为'on'的问题，通过设置value属性解决；对于下拉框，采用标志变量确保唯一性。

最近做项目的时候遇到一些很重要的细节问题，在这里给自己记录一下（其实就是自己记性不好，怕以后遇到同样问题会忘掉）：

使用jq写了动态生成的checkbox的时候，想要获取选中的checkbox的序号，然后我直接做了如下操作：
```
var destr=[];
         $(".checkone:checked").each(function() {                          
             n = $(this).parents("tr").index();   
             // 获取checkbox所在行的顺序
               destr.push(this.value);
             $("table#table_infor").find("tr:eq("+n+")").remove();
         });
         alert(destr);
```
发现网页弹出来的是这样

出来的并不是一个数组，而是“on”值，这是因为如果没有给checkbox在HTML赋value值的话，浏览器会默认给个value为"on"。因为我的这个checkbox是动态生成的，所以要解决这个问题只需要一句代码：
```
ocheck.setAttribute("value",res.data[i].Number); 
```
此时弹出框为：

问题得到解决。

2.当我想把文本框的输入值增加进下拉框的选项中时，我写了如下代码：

$("#name_btn").click(function() {
		var text = document.getElementById("new_name").value;
		var newoption = document.createElement("option");
		var myselect = document.getElementById("s_id");
		var len=myselect.options.length;
		for(i=0;i<len;i++){
			if(myselect.options[i].value==text){
				alert("该用户名已存在！")			
		}
			else{
				newoption.text = text;
				myselect.add(newoption);
                alert(1)
			}
});

晃眼一看觉得没什么毛病，但是运行的时候，你会发现浏览器弹出1，并且会弹好几次。按道理讲预期效果应该是只弹一次吧，并且下拉框中不应该存在相同的选项。

这是因为在for循环中，会把文本框的这个值拿去和下拉框中的每个选项进行比对，有多少个选项就会比对多少次，所以就会弹出多个1并重复增加。解决办法如下：

	$("#name_btn").click(function() {
		var text = document.getElementById("new_name").value;
		var newoption = document.createElement("option");
		var myselect = document.getElementById("s_id");
		var len=myselect.options.length;
		var name=true;
		for(i=0;i<len;i++){
			if(text == myselect.options[i].value){
				alert("该角色名已存在！")
				name=false;
			}
			
		}
		if(name){
			newoption.text = text;
			myselect.add(newoption);
			newoption.selected = true;     //下拉框选中新增选项
		
		}
});

over。