php - 获取取消选择选项的值 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;

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

有什么方法可以从 list2 中删除 list1 中未选中的元素？

即当一个选项未被选中时，我想删除 list2 中具有未选中元素的类值的所有元素。

注意:在 fetchlist2 中获取列表的操作很昂贵，因此我想在 javascript 中处理元素的删除。

Answer 1

如果您只想从列表 2 中删除列表 1 中未选择的选项，您可以试试这个:

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

或者如果您只想删除一个选项元素，其类是 list1 中未选择元素的值:

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