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的每个选项，我还添加了一个与list2值对应的list1值的类。

为了加载所选选项的元素，我使用代码：

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

如果你只想从list2中删除list1中未选中的选项，你可以试试这个：

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

Answer 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);
            }
        }
        });
      }

获取所选选项Multiselect的值

2 个答案: