分类目录归档:javascript知识库

JavaScript select对象之remove()方法简介说明


摘要:
下文讲述select对象之remove()方法的功能简介说明,如下所示:


select对象之remove()方法简介说明

select对象之remove()方法的功能:
删除一个select对象指定位置上的下拉选项
select对象之remove()方法的语法:
selectObject.remove(index)
———参数说明——
selectObject:
此参数为待删除选项的select对象
index:必需,待删除下拉选项所处的索引位置

select对象之 remove()方法注意事项:
1.select对象之remove方法目前支持所有浏览器
2.index下拉选项的计数从0开始


select对象之 remove()方法 获取举例

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---select对象之remove 移除下拉项方法举例说明
</title> 
<script type="text/javascript"> 
window.onload=function(){ 
  let oSelect=document.getElementById("ddlSelect");
   
   //移除下拉框的第三个下拉项目
  oSelect.remove(2); 
 
} 
</script> 
</head> 
<body> 
<p>maomao365.com <br />
select 对象之remove方法举例演示
</p>
<select id="ddlSelect" > 
  <option value="1">猫猫教程---1</option> 
  <option value="2">猫猫教程---2</option> 
  <option value="3">猫猫教程---3</option> 
  <option value="4">猫猫教程---4</option> 
</select> 
</body> 
</html>
select对象之remove方法简介说明

select对象之remove方法简介说明

JavaScript select对象之add()方法简介说明


摘要:
下文讲述select对象之add()方法的功能简介说明,如下所示:


select对象之add()方法简介说明

select对象之add()方法的功能:
向一个select对象添加下拉选项
select对象之add()方法的语法:
selectObject.add(option,before)
———参数说明——
selectObject:
此参数为待添加选项的select对象
option:必需,要添加选项元素;option或optgroup元素。
before:必需, 设置下拉项的添加位置,当此参数输入null时,则在下拉项的末尾添加option信息

select对象之 add()方法注意事项:
select 对象 add方法目前支持所有浏览器


select对象之 add()方法 获取举例

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---select对象之add方法举例说明
</title> 
<script type="text/javascript"> 
window.onload=function(){ 
  let oSelect=document.getElementById("ddlSelect");
   
  //创建一个option元素
  var newoption1=document.createElement("option"); 
  newoption1.text="猫猫教程---5"; 
  newoption1.value=5; 
   //将option元素插入到下拉框尾部
  oSelect.add(newoption1,null); 
 
  //创建一个option元素
  var newoption2=document.createElement("option"); 
  newoption2.text="猫猫教程---6"; 
  newoption2.value=6; 
   //将option元素插入到第三个下拉元素的前面
  oSelect.add(newoption2,oSelect.options[2]); 
 
} 
</script> 
</head> 
<body> 
<p>maomao365.com <br />
select 对象之add方法举例演示
</p>
<select id="ddlSelect" > 
  <option value="1">猫猫教程---1</option> 
  <option value="2">猫猫教程---2</option> 
  <option value="3">猫猫教程---3</option> 
  <option value="4">猫猫教程---4</option> 
</select> 
</body> 
</html>
select对象之add方法简介说明

select对象之add方法简介说明

JavaScript select对象之”options 集合”简介说明


摘要:
下文讲述select对象之”options 集合”的功能简介说明,如下所示:


select对象之”options 集合”简介说明

select对象之 options 集合的功能:
返回一个select对象下拉框的集合
select对象之 options 集合语法:
selectObject.options
———参数说明——
selectObject:
此参数为待获取select对象
———返回值说明—–
返回指定select对象所有的选项集合
每个集合中都包含option的text label信息

select对象之 options 集合注意事项:
1.options集合获取属性目前支持所有浏览器
2.options集合中的索引从0开始计数


select对象之”options 集合” 获取举例

 
    <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
----select对象之options集合举例说明
</title>
<script>   
window.onload=function(){
  let oSelect = document.getElementById('ddlSelect');   
  let oD = document.getElementById('messageInfo');   
   
  console.log(oSelect.options);  
  
 //使用options集合可以获取text和value值
  
  oD.innerHTML ="第二个元素的value:"+oSelect.options[1].value; 
  oD.innerHTML = oD.innerHTML +" text:"+oSelect.options[1].text;

}
</script>
</head>
<body>
<p>maomao365.com<br />
select对象之options集合举例说明
</p>
<select id="ddlSelect" >   
  <option value="0">--请选择--</option>  
  <option value="1">猫猫教程---1</option> 
  <option value="2">猫猫教程---2</option>  
  <option value="3">猫猫教程---3</option>  
  <option value="4">猫猫教程---4</option>   
</select>
<div id="messageInfo"></div>
</body>
</html>
select对象之options集合简介说明

select对象之options集合简介说明