0
votes

Sélection d'un élément de la première zone de sélection pour renseigner la deuxième boîte de sélection

J'ai une forme avec deux champs de sélection. Le premier champ Select répertoriera les éléments, le second champ de sélection démarrera vide mais être peuplé en sélectionnant un élément à partir de la première et en appuyant sur le bouton Ajouter. Vous seriez également capable de faire la même chose. Vous pouvez sélectionner un élément dans le deuxième champ Sélectionner et appuyez sur la Supprimer pour l'ajouter à la première sélection de sélection. En fin de compte, je veux que toutes les valeurs du deuxième champ de sélection soient dans une boîte de formulaire cachée séparée par des virgules.

Je suis entré des exemples de cela avec JavaScript dans le passé, mais maintenant que j'ai besoin d'eux je peux 't semble les trouver. Est-ce que quelqu'un connaît des sources qui pourraient me montrer comment accomplir quelque chose comme ça? Au début, je pensais à le faire avec Ajax mais je préférerais le faire sans charger une autre page. Toute aide pour me pointer dans la bonne direction serait grandement appréciée! Merci d'avance! xxx

javascript button forms select option

0 commentaires

3 Réponses :

2
votes

Vous pouvez utiliser jQuery ajouter () pour le faire: xxx

stylo de travail



                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Merci, merci m'a mis sur la bonne voie à ce que je cherchais à faire. J'apprécie l'aide!


                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez utiliser le  ajouter ()  code> et  supprimer ()  code> méthodes sur le  Sélectionnez  code> élément: 
  p> 


<form name="SelectItem">
  <select name="SelectItem" id="select1">
      <option value="item1">Item 1</option>
      <option value="item2">Item 2</option>
      <option value="item3">Item 3</option>
  </select>

  <button id="addButton">Add =></button>
  <button id="removeButton"><= Remove</button>

  <select name="SelectedItems" id="select2">

  </select>
</form>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    J'aime cette réponse. Je me demandais cependant comment puis-je limiter le nombre d'articles pourraient être ajoutés au deuxième champ Sélectionner?                                                
                                                
                                                                                            
                                                    Autant qu'il existe des éléments sur le premier champ Sélectionner, vous pourrez les ajouter au deuxième champ Sélectionner.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Ci-dessous est une approche relativement simple que vous pouvez prendre qui tire parti de la technique de la délégation d'événements: 
  p> 


<!-- Added container to enable event delegation -->
<div id="container">
  <select name="SelectItem" id="in-item-list">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
  </select>
  <button id="add">Add =></button>
  <button id="remove"><= Remove</button>
  <select name="SelectedItems" id="out-item-list" />
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires