JavaScript和JQuery和angularjs操作select
最后更新于：2022-04-01 11:43:55
今天使用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);
}