JavaScript和JQuery和angularjs操作s-JS重塑学习

今天使用angularjs操作select下拉列表，发现了一些问题，这里特意来总结一下他和JS,以及jquery的用法；

标签定义和用法

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将表单数据提交给服务器时包括 name 属性。

标签可选的属性

属性值描述

disabled disabled 规定禁用该下拉列表。

multiple multiple 规定可选择多个选项。

name name 规定下拉列表的名称。

size number 规定下拉列表中可见选项的数目。

标签全局属性

标签支持 HTML 中的全局属性。

标签事件属性

标签支持 HTML 中的事件属性。

标签用法举例

test1test2test3

设置默认选中可在option 中添加 selected = "selected",具体举例如下:

test2

给某个option 添加 selected = "selected" 属性就是默认选项,当然也可以简写

成selected；

操作标签

1.动态创建select

function createSelect(){

var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

这里要注意一点是这段代码必须放在body后面执行；而且这里动态添加也可以通过ID来添加，这样定位会更精确一点
在日常开发中也用的最多；

 <body >
	<div id="selectDiv">
	</div>
 </body>
<script>
	function createSelect(){
	var mySelect = document.createElement("select");
	mySelect.id = "mySelect";
	var div=document.getElementById("selectDiv");
	div.appendChild(mySelect);
	}

2.添加选项option

function addOption(){
//根据id查找对象，
var obj=document.getElementById("mySelect");
//添加一个选项
obj.add(new Option("文本","值"));
}

3.动态添加选项option

在开发中我们经常会用到动态的去添加option里面的值，我们也没去和后台交互，最简单的办法就是通过ajax请求，
得到后台传过来的数据，然后我们去拼装这个option格式的字符串，最后去显示；

$.ajax({     
    url:"action",     
    type:"post",     
    data:data,     
    async : false, //默认为true 异步     
    error:function(){     
       alert("error");     
    },     
    success:function(data){     
       $("#mySelect").append(data);     
    }  
});

当然这种方法比较笨重，如果使用angularjs的话，就可以在后台得到这个下拉框的list集合，然后通过页面取遍历

<select ng-model="select.Myselect">
		<option ng-repeat="item in list" value="item.id">
			{{item.value}}
		</option>
	</select>

4.删除所有选项option

function removeAll(){
var obj=document.getElementById("mySelect");
obj.options.length=0;
}

5.删除一个选项option

function removeOne(){
var obj=document.getElementById("mySelect");
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

6.获得选项option的值

var obj = document.getElementByIdx_x(”testSelect”); //定位id

var index = obj.selectedIndex; // 选中索引

var text = obj.options[index].text; // 选中文本

var value = obj.options[index].value; // 选中值

jQuery中获得选中select值
function removeOne(){
var obj=document.getElementById("mySelect");
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

第一种方式
$("#testSelect option:selected").text();//选中的文本

$("#testSelect) .val();//选中的值

$("#testSelect ").get(0).selectedIndex;//索引

第二种方式
$("#tesetSelect").find("option:selected").text();//选中的文本
…….val();
…….get(0).selectedIndex;

7.修改选项option

var obj=document.getElementById("mySelect");

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}