1. Créer dynamiquement une sélection
Copiez le code comme suit :
fonction createSelect(){
var mySelect = document.createElement_x("select");
maSélection.id = "maSélection";
document.body.appendChild(mySelect);
}
2. Ajouter une option
Copiez le code comme suit :
fonction addOption(){
//Trouver des objets en fonction de leur identifiant,
var obj=document.getElementByIdx_x('mySelect');
//Ajouter une option
obj.add(new Option("text","value")); //Ceci n'est valable que dans IE
obj.options.add(new Option("text","value")); //Ceci est compatible avec IE et Firefox
}
3. Option Supprimer toutes les options
Copiez le code comme suit :
fonction supprimerTout(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}
4. Supprimer une option option
Copiez le code comme suit :
fonction supprimerUn(){
var obj=document.getElementByIdx_x('mySelect');
//index, le numéro de série de l'option à supprimer, prend ici le numéro de série de l'option actuellement sélectionnée
var index=obj.selectedIndex;
obj.options.remove(index);
}
5. Obtenez la valeur de l'option option
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Numéro de série, prend le numéro de série de l'option actuellement sélectionnée
var val = obj.options[index].value;
6. Obtenez le texte de l'option option
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Numéro de série, prend le numéro de série de l'option actuellement sélectionnée
var val = obj.options[index].text;
7. Modifier l'option option
var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Numéro de série, prend le numéro de série de l'option actuellement sélectionnée
var val = obj.options[index]=new Option("nouveau texte","nouvelle valeur");
8. Supprimer la sélection
Copiez le code comme suit :
fonction supprimerSélectionner(){
var monSelect = document.getElementByIdx_x("mySelect");
monSelect.parentNode.removeChild(mySelect);
}
Le code complet de l'exemple complet est le suivant :
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<tête>
<méta http-equiv="Content-Type" content="text/html">
<tête>
<langage de script=JavaScript>
fonction $(id)
{
retourner document.getElementByIdx_x(id)
}
fonction show()
{
var selectObj=$("zone")
var monOption=document.createElement_x("option")
monOption.setAttribute("valeur","10")
monOption.appendChild(document.createTextNode("Shanghai"))
var monOption1=document.createElement_x("option")
monOption1.setAttribute("valeur", "100")
monOption1.appendChild(document.createTextNode("Nanjing"))
selectObj.appendChild (monOption)
selectObj.appendChild(monOption1)
}
choix de fonction()
{
var index=$("zone").selectedIndex;
var val=$("zone").options[index].getAttribute("valeur")
si(val==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement_x("select")
sh.add(nouvelle option("Nouvelle zone de Pudong","101"))
sh.add(nouvelle option("District de Huangpu","102"))
sh.add(nouvelle option("District de Xuhui","103"))
sh.add(nouvelle option("District de Putuo","104"))
$("context").appendChild(sh)
}
si(val==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement_x("select")
nj.add(nouvelle option("District de Xuanwu","201"))
nj.add(nouvelle option("白下区","202"))
nj.add(nouvelle option("Xiaguan District","203"))
nj.add(nouvelle option("District de Qixia","204"))
$("context").appendChild(nj)
}
}
fonctioncalc()
{
var x=$("context").childNodes.length-1;
alerte(x)
}
fonction supprimer()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<corps>
<div id="context">
<select id="area" onchange="choice()">
</sélectionner>
</div>
<input type=button value="Afficher" onclick="show()">
<input type=button value="Nœud de calcul" onclick="calc()">
<input type=button value="Supprimer" onclick="remove()">
</corps>
</html>
Version améliorée : ajouter, modifier et supprimer des éléments d'option dans la sélection
Copiez le code comme suit :
function watch_ini(){ // initiale
pour(var i=0; i<arguments.length; i++){
var mot = document.createElement_x("OPTION");
mot.text = arguments[i];
watch.keywords.add(word); // watch est le nom du formulaire.
}
}
function watch_add(f){ // ajouter
var mot = document.createElement_x("OPTION");
mot.texte = f.mot.valeur ;
f.keywords.add(mot);
}
Cependant, la méthode add() ci-dessus n'est valable que sous IE. Afin d'être compatible avec FF et Opera, le code ci-dessus a été amélioré. Le code modifié est le suivant :
Copiez le code comme suit :
function watch_ini(){ // initiale
pour(var i=0; i<arguments.length; i++){
var oOption=nouvelle Option(arguments[i],arguments[i]);
document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // ajouter
var oOption=nouvelle Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption ;
}
Le code complet de l'exemple complet est le suivant :
Copiez le code comme suit :
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<tête>
<title>Javascript sélectionne la valeur du texte des options</title>
<meta name="keywords" content="javascript sélectionner les options texte valeur ajouter modifier supprimer définir">
<meta name="description" content="javascript sélectionner les options texte valeur ajouter modifier supprimer ensemble">
<langage de script="javascript">
<!--
function watch_ini(){ // initiale
pour(var i=0; i<arguments.length; i++){
var oOption=nouvelle Option(arguments[i],arguments[i]);
document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // ajouter
var oOption=nouvelle Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption ;
}
function watch_sel(f){ // Modifier
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // Modifier
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // Supprimer
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // sauvegarder
var ensemble = "";
pour(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirmer (définir);
}
//-->
</script>
</tête>
<corps>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<langage de script="javascript">
<!--
watch_ini("Je", "Vous", "Il", "Elle", "Cela", "Euh"); // Mot-clé initial
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="Ajouter" onclick="watch_add(this.form);"
<input type="button" value="Modify" onclick="watch_mod(this.form);"
<input type="button" value="Delete" onclick="watch_del(this.form);"
<input type="button" value="Enregistrer" onclick="watch_set(this.form);"
</form>
Créez une méthode tableau à partir d'une chaîne :
Copiez le code comme suit :
<langage de script="javascript">
</corps>
</html>
<script>
fonction spli(){
datastr="2,2,3,5,6,6";
var str= nouveau tableau();
str=datastr.split(",");
pour (i=0;i<str.length ;i++)
{ document.write(str[i]+"<br/>" }
}
spli();
</script>
J'ai débogué un morceau de js aujourd'hui et il a bien fonctionné sur IE. Cependant, une erreur s'est produite lors du débogage sur Firefox, j'ai vérifié les informations et j'ai découvert cela.
obj.add(new Option("text","value")); //Ceci n'est valable que dans IE
obj.options.add(new Option("text","value")); //Ceci est compatible avec IE et Firefox
Grâce à ce code, j'ai recherché des informations sur Internet et collecté cet article pour revoir les anciens js en temps réel.