JavaScript和JQuery和angularjs操作select

Dear 丶 2022-08-10 08:51 179阅读 0赞

今天使用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>

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

给某个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);