jquery supprimer l'élément sélectionné et ajouter à un autre

Question

J'essaie de ré-ajouter une "option supprimée" au menu d'option de sélection approprié.

J'ai trois zones de sélection: "Catégories", "Variables" et "Cible". "Catégories" est une sélection chaînée, donc lorsque l'utilisateur sélectionne une option, la boîte de sélection "Variables" est remplie avec des options spécifiques à l'option des catégories sélectionnées. Lorsque l'utilisateur choisit une option dans la zone de sélection "Variables", il est ajouté à la zone de sélection "Cible". J'ai une fonction "supprimer sélectionné" de sorte que si un utilisateur "supprime" un élément sélectionné de la boîte de sélection "Cible", il est supprimé de "Cible" et remis dans le pool des options "Variables". Le problème que je rencontre est qu'il ajoute l'option aux éléments "Variables" sans discrimination. Autrement dit, si la catégorie sélectionnée est "Age", les options "Variables" ont toutes une classe "age". Mais, si l'option enlevée est un item "revenu", elle apparaîtra dans la liste des options "Age Variables".

Voici le balisage HTML:

<select multiple="" id="categories" name="categories[]"> 
    <option class="category" value="income">income</option> 
    <option class="category" value="gender">gender</option> 
    <option class="category" value="age">age</option> 
</select> 

<select multiple="multiple" id="variables" name="variables[]"> 
    <option class="income" value="10">$90,000 - $99,999</option> 
    <option class="income" value="11">$100,000 - $124,999</option> 
    <option class="income" value="12">$125,000 - $149,999</option> 
    <option class="income" value="13">Greater than $149,999</option> 
    <option class="gender" value="14">Male</option> 
    <option class="gender" value="15">Female</option> 
    <option class="gender" value="16">Ungendered</option> 
    <option class="age" value="17">Ages 18-24</option> 
    <option class="age" value="18">Ages 25-34</option> 
    <option class="age" value="19">Ages 35-44</option> 
</select> 

<select height="60" multiple="multiple" id="target" name="target[]"> 
</select> 

Et, voici les js:

/* This determines what options are display in the "Variables" select box */ 
    var cat = $('#categories'); 
    var el = $('#variables'); 

    $('#categories option').click(function() { 
     var class = $(this).val(); 
     $('#variables option').each(function() { 
      if($(this).hasClass(class)) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    }); 

/* This adds the option to the target select box if the user clicks "add" */ 
    $('#add').click(function() { 
     return !$('#variables option:selected').appendTo('#target'); 
    }); 

/* This is the remove function in its current form, but doesn't append correctly */ 
    $('#remove').click(function() { 
       $('#target option:selected').each(function() { 
         var class = $(this).attr('class'); 

         if($('#variables option').hasClass(class)) { 
           $(this).appendTo('#variables'); 
           sortList('variables'); 
         } 
       }); 
    }); 

Answer 1

Vous constaterez que vous êtes sur la mauvaise route car vous ne pouvez pas "masquer" les éléments de l'option de manière cohérente à travers les navigateurs. Vous devez en fait les ajouter et les supprimer pour modifier la liste.

J'ai mis en place une version de travail de ce que vous cherchez, et vous pouvez view it ou edit it sur JSBin.

Le débit de base est la suivante:

1. Sur chargement de la page, saisissez toutes les options de #variables et stocker ensuite dans un hachage/tableau pour une utilisation ultérieure.
2. Créez une fonction update_variables qui vide la liste des variables, ajoute toutes les bonnes pour la catégorie sélectionnée. La partie importante ici est de vérifier si la cible a déjà l'élément avec cette valeur et ne l'ajoutera pas car elle est déjà ajoutée à la cible.
3. Sur "Ajouter", ajoutez simplement les éléments sélectionnés de #variables à #target et désélectionnez-les.
4. sur « Supprimer » il suffit de retirer les éléments choisis parmi #target et appelez update_variables()

Voici un échantillon de quelques méthodes. Regardez la source sur JSBin pour tout le code nécessaire:

opts finit par ressembler à ceci:

var opts = { 
    'age':[ 
     { label: 'Ages 18-24', value: 17 }, 
     { label: 'Ages 25-34', value: 18 }, 
     { label: 'Ages 35-44', value: 19 } 
    ] 
    .... 
} 

Voici la fonction update_variables:

function update_variables(){ 
    var cat = $cats.val(), new_opts = []; 
    $vars.empty(); 

    $.each(opts[cat], function(){ 
    if($target.find('[value=' + this.value + ']').length === 0){ 
     new_opts.push(option(this.value, this.label)); 
    } 
    }); 

    $vars.html(new_opts.join('')); 
} 

Note: la fonction option() est une petite aide qui crée le code HTML pour un élément d'option.

Answer 2

Si l'on suppose la chose que vous voulez déplacer est en $(this), et que vous voulez ajouter à $(some_other_thing), vous peut utiliser $(some_other_thing).append($(this).html()) puis $(this).hide() ou $(this).remove().

Answer 3

Jetez un oeil à la méthode jQuery 1.4 detach() ..

Je crois qu'il est ce que vous voulez .. Avec et appendTo() vous pouvez déplacer librement des éléments autour de l'un à l'autre ..