Get value of Deselected option Multiselect - php

Question

I have a form that has a 2 select boxes for dependent lists.
I'm loading a second list based on the value selected in the first list, which is multiselect.
<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>
For each option added to list2, I'm also adding a class with value of list1 corresponding to the list2 value.
For loading the elements for the selected option, I use the 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;
////////////////
}
Is there any way in which I can remove the element unselected in list1 from list2?
i.e when an option is unselected, I want to remove all elements in list2 having class value of the unselected element.
Note : The operation for fetching the list in fetchlist2 is expensive and hence I want to handle removal of element in javascript.

Answer 1

you could try this if you just want the unselected options from list1 to be removed from 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);
});
or if you just want to remove an option element with a class that is the value of the unselected element from list1:
$('#list1 option:not(:selected)').click(function(){
$('#list2 option[class="'+ $(this).val() +'"]').remove();
})

Answer 2

Im sorry if I was not able to express my problem properly.
These are 2 different lists, with the value of first list determining what was to be loaded in the second list, similar to selecting category and loading subcategory based on selected category.
I sort of figured out a way to do it. This is how I did what I wanted:
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);
}
}
});
}