来自 关于计算机 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

select控件操作大全,javascript如何操作HTML下拉列表

先给咱们讲下大约达成思路,具体内容介绍请看下边。

1推断select选项中 是或不是存在Value="paraValue"的Item
2向select选项中 插手多少个Item
3从select选项中 删除八个Item
4去除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6装置select中text="paraText"的第叁个Item为当选
7设置select中value="paraValue"的Item为选中
8到手select的此时此刻相中项的value
9获得select的如今当选项的text
10赢得select的脚下入选项的Index
11清空select的项
js 代码
// 1.论断select选项中 是还是不是留存Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判定是或不是存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功步入");
}
}
// 3.从select选项中 删除二个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//决断是或不是留存
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 空头支票该项");
}
}
// 4.剔除select中当选的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//剖断是或不是存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不设有该项");
}
}
// 6.设置select中text="paraText"的第二个Item为当选
function jsSelectItemByValue(objSelect, objItemText) {
//判定是还是不是存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功入选");
} else {
alert("该select中 不设有该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.获得select的近些日子当选项的value
var currSelectValue = document.all.objSelect.value;
// 9.获取select的此时此刻当选项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.获得select的当下当选项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;

判断select选项中 是不是存在Value="paraValue"的Item

你大概感兴趣的篇章:

  • javascript对下拉列表框(select)的操作实例讲明
  • javascript 操作select下拉列表框的一点小经验
  • JavaScript关于select的相干操作表达
  • Javascript select下拉框操作常用方法
  • Javascript Select操作大聚合
  • javascript Select标识中options操作方法汇合
  • Javascript操作select方法大全[增加产量、修改、删除、选中、清空、推断存在等]
  • javascript操作select成分实例分析

向select选项中 到场二个Item

从select选项中 删除八个Item

去除select中当选的项

修改select选项中 value="paraValue"的text为"paraText"

设置select中text="paraText"的第一个Item为当选

设置select中value="paraValue"的Item为选中

拿到select的当前入选项的value

获取select的脚下选中项的text

获得select的方今当选项的Index

清空select的项

js 代码

// 1.论断select选项中 是不是存在Value="paraValue"的Item       

function jsSelectIsExitItem(objSelect, objItemValue) {    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].value == objItemValue) {    
      isExit =true;    
      break;    
    }    
  }    
  return isExit;    
}

// 2.向select选项中 参预三个Item   

function jsAddItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    alert("该Item的Value值已经存在");    
  }else{    
    var varItem =new Option(objItemText, objItemValue);   
    objSelect.options.add(varItem);   
    alert("成功加入");   
  }    
} 

// 3.从select选项中 删除三个Item   

function jsRemoveItemFromSelect(objSelect, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options.remove(i);    
        break;    
      }    
    }    
    alert("成功删除");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 4.删减select中当选的项   

function jsRemoveSelectedItemFromSelect(objSelect) {    
  var length = objSelect.options.length -1;  
  for(var i = length; i >=0; i--){  
    if(objSelect[i].selected ==true){  
      objSelect.options[i] =null;  
    }  
  }  
}

// 5.修改select选项中 value="paraValue"的text为"paraText" 

function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options[i].text = objItemText;    
        break;    
      }    
    }    
    alert("成功修改");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 6.设置select中text="paraText"的首先个Item为当选 

function jsSelectItemByValue(objSelect, objItemText) {      
  //判断是否存在    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].text == objItemText) {    
      objSelect.options[i].selected =true;    
      isExit =true;    
      break;    
    }    
  }       
  //Show出结果    
  if (isExit) {    
    alert("成功选中");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 7.设置select中value="paraValue"的Item为选中

document.all.objSelect.value = objItemValue;   

  

// 8.得到select的此时此刻当选项的value

var currSelectValue = document.all.objSelect.value;

// 9.赢得select的当前入选项的text

var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.到手select的脚下相中项的Index

var currSelectIndex = document.all.objSelect.selectedIndex; 

// 11.清空select的项 

document.all.objSelect.options.length =0; 

如上内容介绍了javascript操作html下拉列表标签的艺术,希望我们爱不释手本文所述。

您或然感兴趣的小说:

  • JS获取下拉列表所选中的TEXT和Value的兑当代码
  • extJs 文本框后边加上表达文字+下拉列表选中值后触发事件
  • javascript下拉列表菜单的贯彻方式
  • javascript下拉列表中突显树形菜单的兑现格局
  • JS完结协助多选的遍历下拉列表代码
  • JS+DIV+CSS达成仿表单下拉列表效果
  • JS+CSS完结下拉列表框美化效果(3款)
  • JS+CSS达成美化的下拉列表框效果
  • jQuery达成在下拉列表选取时获得json数据的点子
  • JS呈现下拉列表框内总体因素的议程
  • js完成下拉列表选中有个别值的艺术(3种方法)

本文由六合联盟网发布于关于计算机,转载请注明出处:select控件操作大全,javascript如何操作HTML下拉列表

关键词: