sur les éléments en mouvement dans selectbox

J'essaie de déplacer les éléments dans une zone de sélection en utilisant les boutons .. pour cela, j'ai utilisé swapNode(). Mais il ne fonctionne que dans IE. en chrome ne fonctionne pas comment le faire fonctionner en chrome Voici mon codesur les éléments en mouvement dans selectbox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Moving the options up and down in Multiple select box </title> 
<script type="text/javascript"> 
function move(id) 
{ 

if (id=='up') 
{ 
    var len= document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[0].selected) 
    { 
     alert("This is the first record"); 
     return false; 
    } 
    var up_id=document.f1.selectbox1.selectedIndex; 
    document.f1.selectbox1[up_id].swapNode(document.f1.selectbox1[up_id-1]); 
} 
if (id=='down') 
{ 
var len=document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[len-1].selected) 
    { 
     alert("This is last record"); 
     return false; 
    } 
    var down_id=document.f1.selectbox1.selectedIndex; 
    document.f1.selectbox1[down_id].swapNode(document.f1.selectbox1[down_id+1]); 
} 
if (id=='top') 
{ 
    var len=document.f1.selectbox1.options.length; 
    if (document.f1.selectbox1[0].selected) 
    { 
     alert("This is the first record"); 
     return false; 
    } 
    var top_id=document.f1.selectbox1.selectedIndex 
    for (var j=top_id;j>0 ;j--) 
    { 
      document.f1.selectbox1[j].swapNode(document.f1.selectbox1[j-1]); 
    } 
} 
if (id=='bottom') 
{ 
    var len=document.f1.selectbox1.options.length;; 
    if(document.f1.selectbox1[len-1].selected) 
     { 
      alert("This is last record"); 
      return false; 
     } 
     var bot_id=document.f1.selectbox1.selectedIndex 
     for (var k=bot_id; k<len-1;k++) 
     { 
       document.f1.selectbox1[k].swapNode(document.f1.selectbox1[k+1]); 

     } 
} 
} 
</script> 
</head> 
<body> 
    <form name="f1"> 
<select multiple size="20" style="width:30%" name="selectbox1" id="select_box"> 
<option id="1">First item</option> 
<option id="2">Second item</option> 
<option id="3">Third item</option> 
<option id="4">Fourth item</option> 
<option id="4">Fifth item</option> 
<option id="4">Sixth item</option> 
<option id="4">Seventh item</option> 
<option id="4">Eighth item</option> 
<option id="4">Ninth item</option> 
<option id="4">Tenth item</option> 
</select><br> 
<input type="button" value="Up" onClick="move('up')"> 
<input type="button" value="Down" onClick="move('down')"> 
<input type="button" value="Top" onClick="move('top')"> 
<input type="button" value="Bottom" onClick="move('bottom')"> 
    </form> 
</body> 
</html>

Source

2010-12-14 Mihir

swapNode() est une extension Microsoft DOM et ainsi de suite ne sera pas reconnu par les navigateurs autres que IE. J'ai exécuté votre exemple dans FireFox et utilisé FireBug (Vous devriez télécharger ce plugin et l'utiliser dans des situations comme celle-ci si ce n'est pas déjà fait) et bien sûr la console lançait une erreur que swapNode() n'était "pas un fonction". Si je devais vous conseiller à partir d'ici, je suggérerais d'aller chercher un plugin jQuery ou quelque chose de ce genre qui réalise cette fonctionnalité aimable. Les bibliothèques comme jQuery ont tendance à offrir des solutions croisées à ces types de problèmes javascript et, le plus souvent, ne sont pas open source (vous pouvez donc jeter un coup d'œil au code et retravailler votre propre implémentation si vous le souhaitez). Alternativement, vous pouvez simplement fournir la fonction swapNode() dans votre code afin que d'autres navigateurs puissent le détecter. Si vous envisagez d'emprunter cette route, vous devriez être en mesure de trouver une implémentation avec une recherche rapide sur Google. J'ai fourni un lien vers une telle implémentation ci-dessous (je n'ai pas révisé ou utilisé ce code, utilisez seulement après avoir passé en revue). À mon humble avis cependant, il est préférable d'éviter les solutions qui dépendent du navigateur car elles ne sont pas toujours à l'épreuve du temps et peuvent souvent entraîner des problèmes imprévus. http://sundberg.it/2006/05/12/swapnode_in_firefox

Bonne chance!

Source

2010-12-14 05:26:54 Kai

Cela pourrait aussi vous être utile: http://www.javascripttoolbox.com/lib/selectbox/jquery.php – Kai

sur les éléments en mouvement dans selectbox

Répondre

Questions connexes