2010-07-31 4 views
-4

Dans mon projet, je veux implémenter le code où je dois garder deux zone de liste (contrôle d'asp), et je veux implémenter ajouter supprimer comme fonctionnalité entre ces deux zone de liste qui supprime un élément de La zone de liste doit être ajoutée à une autre et la suppression d'une autre doit être ajoutée en premier.S'il vous plaît suggérer une bonne solution

Comment puis-je utiliser JavaScript pour obtenir cet effet? Tous les liens vers des tutoriels seraient également utiles. Merci d'avance.

+0

Java ou JavaScript? A part ça, qu'avez-vous essayé jusqu'ici? – MvanGeest

+0

nous aurons besoin de beaucoup plus de détails, aussi clair que possible, pour être en mesure d'aider. La suggestion de base que quelqu'un pourrait vous donner sur cette base est «apprendre à utiliser jQuery», ce qui peut être utile ou non. – JAL

+1

Je crois qu'il veut faire quelque chose comme ça: http://jsfiddle.net/7tZ6H/ –

Répondre

2

Vous pouvez utiliser le code source que j'ai fourni ici, qui est copié à partir http://www.johnwbartlett.com/CF_tipsNtricks/index.cfm?TopicID=86

<html> 
<head> 
<title>Multi-list copy example</title> 
<body> 
<script language="Javascript"> 
function SelectMoveRows(SS1,SS2) 
{ 
    var SelID=''; 
    var SelText=''; 
    // Move rows from SS1 to SS2 from bottom to top 
    for (i=SS1.options.length - 1; i>=0; i--) 
    { 
     if (SS1.options[i].selected == true) 
     { 
      SelID=SS1.options[i].value; 
      SelText=SS1.options[i].text; 
      var newRow = new Option(SelText,SelID); 
      SS2.options[SS2.length]=newRow; 
      SS1.options[i]=null; 
     } 
    } 
    SelectSort(SS2); 
} 
function SelectSort(SelList) 
{ 
    var ID=''; 
    var Text=''; 
    for (x=0; x < SelList.length - 1; x++) 
    { 
     for (y=x + 1; y < SelList.length; y++) 
     { 
      if (SelList[x].text > SelList[y].text) 
      { 
       // Swap rows 
       ID=SelList[x].value; 
       Text=SelList[x].text; 
       SelList[x].value=SelList[y].value; 
       SelList[x].text=SelList[y].text; 
       SelList[y].value=ID; 
       SelList[y].text=Text; 
      } 
     } 
    } 
} 
</script> 
<form name="Example"> 
<table border="0" cellpadding="3" cellspacing="0"> 
    <tr> 
     <td> 
      <select name="Features" size="9" MULTIPLE> 
       <option value="2">Row 2</option> 
       <option value="4">Row 4</option> 
       <option value="5">Row 5</option> 
       <option value="6">Row 6</option> 
       <option value="7">Row 7</option> 
       <option value="8">Row 8</option> 
       <option value="9">Row 9</option> 
      </select> 
     </td> 
     <td align="center" valign="middle"> 
      <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br> 
      <br> 
      <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)"> 
     </td> 
     <td> 
      <select name="FeatureCodes" size="9" MULTIPLE> 
       <option value="1">Row 1</option> 
       <option value="3">Row 3</option> 
      </select> 
     </td> 
    </tr> 
</table> 
</form> 

</body> 
</html> 
2

Si vous avez un fichier HTML comme ceci:

<select id="listBox1" size="5"> 
<option value="1">Item 1</option> 
<option value="2">Item 2</option> 
<option value="3">Item 3</option> 
</select> 

<select id="listBox2" size="5"> 
<option value="4">Item 4</option> 
<option value="5">Item 5</option> 
<option value="6">Item 6</option> 
</select> 

<a href="#" id="moveLink">Move selected from list 1 to list 2</a> 

Puis le jquery suivant prendrait les éléments sélectionnés de la liste 1 et les déplacer à la liste 2 lorsque le MOVELINK est cliqué.

$(function() { 
    $('#moveLink').click(function() { 
     $('#listBox1 option:selected').each(function(i, opt) { 
      $('#listBox2').append($('<option></option>').attr('value', opt.val()).text(opt.text()); 

      $(opt).remove(); 
     }); 
    }); 
}); 

Aller à www.jquery.com pour obtenir la bibliothèque à inclure dans la page, ainsi que cela fonctionne.

Questions connexes