Récupère la valeur de l'option Désélectionnée Multiselect

Question

J'ai un formulaire avec 2 cases de sélection pour les listes dépendantes.

Je charge une deuxième liste basée sur la valeur sélectionnée dans la première liste, qui est multi-sélection.

<select id="list1" multiple='multiple'> 
    <option value="a">a value</option> 
    <option value="b">b value</option> 
    <option value="c">c value</option> 
</select> 
<select id="list2"> 
</select> 

Pour chaque option ajoutée à List2, je suis également d'ajouter une classe avec une valeur de list1 correspondant à la valeur de liste2.

Pour le chargement des éléments pour l'option sélectionnée, j'utilise le code:

$('#list1').on('change', function(){ 
    var list1vals = $('#list1').val().split(','); 
    var newval = ''; 
    for(x in list1vals) 
    { 
     // Checking for selected value of list1 which doesn't have 
     // corresponding values in list2. 

     if($('.'+list1vals[x]).length == 0) 
     { 
      newval = list1vals[x]; 
     } 
    } 
    $.ajax({ 
     type : "GET", 
     url : "/xyz.php?action=getlist2&list1="+newval, 
     success : function(response) 
     { 
      if($.trim(response) != '') 
      { 
       $('#list2').append(response); 
      } 
     } 
    }); 
}); 

xyz.php

$action=$_GET['action']; 
$listval1=$_GET['list1']; 
switch($action) 
{ 
    ///////////////// 

    case 'getlist2': 
      $list2 = fetchlist2($list1val); 
      foreach($list2 as $listobj) 
      { 
       $optionlist = '<option class="'.$list1val.'" value="'.$listobj['id'].'">'.$listobj['value'].'</option>'; 
      } 
      echo $optionlist; 
      break; 

    //////////////// 
} 

Est-il possible où je peux retirer l'élément désélectionné dans list1 de list2?

Si une option n'est pas sélectionnée, je souhaite supprimer tous les éléments de la liste2 ayant la valeur de classe de l'élément non sélectionné.

Remarque: L'opération d'extraction de la liste dans fetchlist2 est coûteuse et par conséquent je veux gérer la suppression de l'élément dans javascript.

Answer 1

Je suis désolé si je n'ai pas pu exprimer correctement mon problème.

Il s'agit de 2 listes différentes, la valeur de la première liste déterminant ce qui doit être chargé dans la deuxième liste, similaire à la sélection de la catégorie et de la sous-catégorie de chargement en fonction de la catégorie sélectionnée.

J'ai en quelque sorte trouvé un moyen de le faire. Voici comment j'ai fait ce que je voulais:

var list1vals = ($('#list1').val()+'').split(','); 
    var newval = ''; 
    for(x in list1vals) 
    { 
     /// Checking list2 elements to see 
     /// which list1 selected element is not present 

     if($('.'+list1vals[x]).length == 0) 
     { 
      newval = list1vals[x]; 
     } 
    } 
    if(newval == '') 
    { 
     /// Some Element removed, checking which 
     /// options remain selected 

     var options1,list2options = []; 
     $('#list1 option:selected').each(function(){ 
      options1 = $('#list2 option[class="'+ $(this).val() +'"]'); 
      list2options.push(options1); 
     }); 
     $('#list2').html(''); 
     $('#list2').append(list2options); 
    } 
    else 
    { 
    $.ajax({ 
     type:"GET", 
     url:"/xyz.php?action=getlist2&list1="+newval, 
     success:function(response) 
     { 
      selectbox = $('#list2'); 
      var list2 = $.parseJSON(response); 

      /// Adding options returned for newval to list2 
      /// with class set as newval 

      for(x in list2) 
      { 
       var option = $('<option></option>'); 
       $(option).attr('value',list2[x].value); 
       $(option).html(list2[x].value); 
       $(option).addClass(newval); 
       $(selectbox).append(option); 
      } 
     } 
     }); 
     } 

Answer 2

vous pouvez essayer si vous voulez juste les options non sélectionnées de list1 à retirer de liste2:

$('#list1').change(function(){   
     var lists = $('#list1').val(); 
     var str = '';   
     if (lists != null){ 
     for(var i=0;i<lists.length;i++){ 
      str += '<option value="'+lists[i]+'">' + $('#list1 option[value="'+ lists[i]+'"]').text() + '</option>'; 
     } 
     } 
     $('#list2').html(str);   
    }); 

ou si vous voulez juste supprimer un élément d'option avec une classe qui est la valeur de la non sélectionnée élément de la liste1:

$('#list1 option:not(:selected)').click(function(){   
    $('#list2 option[class="'+ $(this).val() +'"]').remove(); 
})