recherche

Maison >interface Web >js tutoriel >Exemple de code pour les opérations JavaScript sur les éléments sélectionnés et les compétences options_javascript

Exemple de code pour les opérations JavaScript sur les éléments sélectionnés et les compétences options_javascript

WBOY
WBOYoriginal
2016-05-16 15:16:461031parcourir

Sans plus attendre, je vous poste le code directement. Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<title></title>
<!--添加jquery-->
<script src="../Script/jQuery/jquery-...min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
createSelect("select", "addSel");
addOption("addSel", "first", "第一个数据");
addOption("addSel", "secord", "第二个数据");
addOption("addSel", "three", "第三个数据");
addOption("addSel", "four", "第四个数据");
addOption("addSel", "fives", "第五个数据");
removeOneByIndex("addSel", );
removeOneByObj("addSel", "secord");
//添加一个option更改事件 调用自己写的方法
$("#addSel").change(function () {
alert("旧文本："+getOptionText("addSel") + "旧Value：" + getOptionValue("addSel"));
editOptions("addSel", "新文本","新Value"); //注意：不传value值的时候 value值默认为text的值
alert("新文本：" + getOptionText("addSel") + "新Value：" + getOptionValue("addSel"));
})
})
//动态创建带id的元素
function createSelect(element, id) {
var select = document.createElement(element);
select.id = id;
document.body.appendChild(select);
}
//根据select的id 添加选项option
function addOption(selectID,value,text) {
//根据id查找对象， 
var obj = document.getElementById(selectID); 
obj.options.add(new Option(text, value)); //这个兼容IE与firefox 
}
//删除所有选项option
function removeAll(selectID) {
var obj = document.getElementById(selectID);
obj.options.length = ;
}
//根据 index 值删除一个选项option
function removeOneByIndex(selectID,index) {
var obj = document.getElementById(selectID);
//index,要删除选项的序号，这里取当前选中选项的序号 
//var index = obj.selectedIndex;//获取选中的选项的index;
obj.options.remove(index);
}
//根据 value或者text值删除一个选项option
function removeOneByObj(selectID, textOrValue) {
var obj = document.getElementById(selectID);
//index,要删除选项的序号，这里取当前选中选项的序号 
//var index = obj.selectedIndex;//获取选中的选项的index;
for (var i = ; i < obj.options.length; i++) {
if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
obj.options.remove(i);
break;
}
}
} 
//获得一个Option Value；
function getOptionValue(selectID){
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index].value;
return val;
} 
//获得一个option Text;
function getOptionText(selectID) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index].text;
return val;
}
//修改选中的option
function editOptions(selectID,newText,newValue) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
obj.options[index] = new Option(newText, newValue);
obj.options[index].selected = true;
}
//删除select
function removeSelect(){
var select = document.getElementById("select"); 
select.parentNode.removeChild(select); 
}
</script>
</head>
<body>
</body>
</html>

Ce qui précède est l'exemple de code que l'éditeur a partagé avec vous pour faire fonctionner l'élément et l'option de sélection en JavaScript. J'espère qu'il vous sera utile.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse de la différence entre les fonctions imbriquées javascript et l'appel de fonctions externes au sein des compétences function_javascriptArticle suivant：Analyse de la différence entre les fonctions imbriquées javascript et l'appel de fonctions externes au sein des compétences function_javascript

Articles Liés

Voir plus