日度归档:2020年3月29日

JavaScript select对象之value属性简介说明


摘要:
下文讲述select对象之value属性的功能简介说明,如下所示:


select对象之value对象简介说明

select对象之value属性的功能:
1.返回select对象下拉框的选中值
2.设置select对象的下拉框的值
select对象之value属性语法:
select.value=value
—–参数说明—–
selectObject:下拉框选择对象
value:待设置的下拉框值
value属性值和selectIndex功能类似

select对象之value属性注意事项:
1.目前所有浏览器都支持此属性
2.此属性是一个可读写属性


select对象之value对象举例说明

 
 <!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.maomao365.com/" />  
<title>猫猫教程(www.maomao365.com)
---select对象之value
</title>
<script> 
window.onload=function(){ 
  let oSelect=document.getElementById("ddlSelect"); 
  let odiv=document.getElementById("messageInfo");
  //获取selectedIndex设置下拉框值
  odiv.innerHTML= "下拉框的选中值:"+oSelect.value;

  let b1 =document.getElementById("btn1");
  let b2 =document.getElementById("btn2"); 
  
  b1.onclick = function(){
      odiv.innerHTML= "下拉框的选中值:"+oSelect.value;
   }
   
  b2.onclick = function(){
     oSelect.value = "3";
     odiv.innerHTML= "下拉框的选中值:"+oSelect.value;
   }
  
} 
</script> 
</head> 
<body> 
<select id="ddlSelect" name="ddlSelect"> 
  <option value="1">猫猫教程----1</option> 
  <option selected value="2">猫猫教程---2</option> 
  <option value="3">猫猫教程---3</option> 
  <option value="4">猫猫教程---4</option> 
</select> 
<div id="messageInfo"></div>
<input type="button" id="btn1" value="获取下拉框value" /> <br />
<input type="button" id="btn2" value="设置下拉框value" />  

</body> 
</html>
select对象之value属性值简介说明

select对象之value属性值简介说明

JavaScript select对象之size属性简介说明


摘要:
下文讲述select对象之size属性的功能简介说明,如下所示:


select对象之size对象简介说明

select对象之size属性的功能:
用于设置select对象中可见的选项数目
select对象之size属性语法:
select.size=number
—–参数说明—–
selectObject:下拉框选择对象
number:一个数字,当此数值小于等于1时,此属性值是不会影响select的显示样式

select对象之size属性注意事项:
1.目前所有浏览器都支持此属性
2.此属性是一个可读写属性
3.select缺省值size为0


select对象之size对象举例说明

 

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.maomao365.com/" />  
<title>猫猫教程(www.maomao365.com)
---select对象之size属性值简介说明
</title>
<script> 
window.onload=function(){ 
  let oSelect=document.getElementById("ddlSelect"); 
  let odiv=document.getElementById("messageInfo"); 

  let b1 =document.getElementById("btn1");
  let b2 =document.getElementById("btn2"); 
  
  b1.onclick = function(){
    odiv.innerHTML= "下拉框的size为:"+oSelect.size;
   }
   
  b2.onclick = function(){
     oSelect.size =2;
     odiv.innerHTML= "下拉框的size为:"+oSelect.size;
   }
  
} 
</script> 
</head> 
<body> 
<select id="ddlSelect" name="ddlSelect"> 
  <option value="1">猫猫教程----1</option> 
  <option selected value="2">猫猫教程---2</option> 
  <option value="3">猫猫教程---3</option> 
  <option value="4">猫猫教程---4</option> 
</select> 
<div id="messageInfo"></div>
<input type="button" id="btn1" value="获取下拉框size值" /> <br />
<input type="button" id="btn2" value="设置下拉框size值为2" />  

</body> 
</html>
select对象之size属性值简介说明

select对象之size属性值简介说明

JavaScript select对象之selectedIndex属性简介说明


摘要:
下文讲述select对象之selectedIndex属性的功能简介说明,如下所示:


select对象之selectedIndex对象简介说明

select对象之selectedIndex属性的功能:
1.用于返回select对象选中option选项值所属的索引编号
2.将指定索引位置的option设置为“选中”状态
select对象之selectedIndex属性语法:
select.selectedIndex=number
—–参数说明—–
selectObject:下拉框选择对象
number:一个数字,
设置指定索引位置option项被选中
0代表第一个元素,1代表第二个下拉元素,依次类推

select对象之selectedIndex属性注意事项:
1.目前所有浏览器都支持此属性
2.selectIndex索引编号是从0开始


select对象之selectedIndex对象举例说明

 

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.maomao365.com/" />  
<title>猫猫教程(www.maomao365.com)
---select对象之selectedIndex
</title>
<script> 
window.onload=function(){ 
  let oSelect=document.getElementById("ddlSelect"); 
  let odiv=document.getElementById("messageInfo");
  //获取selectedIndex设置下拉框值
  odiv.innerHTML= "下拉框的选中索引为:"+oSelect.selectedIndex;

  let b1 =document.getElementById("btn1");
  let b2 =document.getElementById("btn2"); 
  
  b1.onclick = function(){
    odiv.innerHTML= "下拉框的选中索引为:"+oSelect.selectedIndex;
   }
   
  b2.onclick = function(){
     oSelect.selectedIndex =2;
     odiv.innerHTML= "下拉框的选中索引为:"+oSelect.selectedIndex;
   }
  
} 
</script> 
</head> 
<body> 
<select id="ddlSelect" name="ddlSelect"> 
  <option value="1">猫猫教程----1</option> 
  <option selected value="2">猫猫教程---2</option> 
  <option value="3">猫猫教程---3</option> 
  <option value="4">猫猫教程---4</option> 
</select> 
<div id="messageInfo"></div>
<input type="button" id="btn1" value="获取选中索引" /> <br />
<input type="button" id="btn2" value="设置第三个下拉框选中" />  

</body> 
</html>
select对象之selectedIndex属性值简介说明

select对象之selectedIndex属性值简介说明