Получить значение Удалить выбранный вариант Multiselect

Question

У меня есть форма, которая имеет 2 блока выбора для зависимых списков.

Я загружаю второй список на основе значения, выбранного в первом списке, который является мультиселективным.

<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> 

Для каждого варианта добавлен в list2, я также добавить класс со значением list1, соответствующего значению list2.

Для загрузки элементов для выбранного варианта, я использую код:

$('#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; 

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

Есть ли способ, в котором я могу удалить элемент невыделенного в list1 из песни2?

Если опция не выбрана, я хочу удалить все элементы в списке2, имеющие значение класса для невыделенного элемента.

Примечание: операция для извлечения списка в fetchlist2 является дорогостоящей и, следовательно, я хочу обработать удаление элемента в javascript.

Answer 1

Мне очень жаль, если я не смог правильно выразить свою проблему.

Это 2 разных списка со значением первого списка, определяющим, что должно было быть загружено во втором списке, аналогично выбору категории и подкатегории загрузки на основе выбранной категории.

Я как-то понял способ сделать это. Вот как я сделал то, что хотел:

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

вы могли бы попробовать это, если вы просто хотите невыбранные варианты от list1 быть удален из list2:

$('#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);   
    }); 

или если вы просто хотите удалить вариант элемент с классом, который является значением невыделенного элемент из списка1:

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