JavaScript和JQuery和angularjs操作select · JS重塑学习

今天使用angularjs操作select下拉列表，发现了一些问题，这里特意来总结一下他和JS,以及jquery的用法； **<select>标签定义和用法** select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。 **<select>标签可选的属性** 属性值描述 disabled disabled 规定禁用该下拉列表。 multiple multiple 规定可选择多个选项。 name name 规定下拉列表的名称。 size number 规定下拉列表中可见选项的数目。 **<select>标签全局属性** <select> 标签支持 HTML 中的全局属性。 **<select>标签事件属性** <select> 标签支持 HTML 中的事件属性。 **<select>标签用法举例** <select name="list"> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option> </select> 设置默认选中可在option 中添加 selected = "selected",具体举例如下: <option value="2" selected="selected">test2</option> 给某个option 添加 selected = "selected" 属性就是默认选项,当然也可以简写成selected； **操作<select>标签** 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); }