Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Operationen für HTML-Dropdown-Listen-Tags

巴扎黑
Freigeben: 2017-09-08 11:25:11
Original
1873 Leute haben es durchsucht

先给大家讲下大概实现思路,具体内容介绍请看下面。

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

向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;    
}
Nach dem Login kopieren

// 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("成功加入");   
  }    
}
Nach dem Login kopieren

// 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中 不存在该项");    
  }    
}
Nach dem Login kopieren

// 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;  
    }  
  }  
}
Nach dem Login kopieren

// 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中 不存在该项");    
  }    
}
Nach dem Login kopieren

// 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中 不存在该项");    
  }    
}
Nach dem Login kopieren

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

document.all.objSelect.value = objItemValue;
Nach dem Login kopieren



// 8.得到select的当前选中项的value

var currSelectValue = document.all.objSelect.value;
Nach dem Login kopieren

// 9.得到select的当前选中项的text

var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
Nach dem Login kopieren

// 10.得到select的当前选中项的Index

var currSelectIndex = document.all.objSelect.selectedIndex;
Nach dem Login kopieren

// 11.清空select的项

document.all.objSelect.options.length =0;
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript-Operationen für HTML-Dropdown-Listen-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!