1

我有一个表单，其中包含 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 中元素的删除。

4

2 回答 2

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

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

$('#list1 option:not(:selected)').click(function(){           
   $('#list2 option[class="'+ $(this).val() +'"]').remove();
})
于 2013-02-28T06:55:12.980 回答
0

如果我无法正确表达我的问题，我很抱歉。

这是两个不同的列表，第一个列表的值决定了第二个列表中要加载的内容，类似于选择类别并根据所选类别加载子类别。

我有点想办法做到这一点。这就是我做我想做的事：

    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);
            }
        }
        });
      }
于 2013-03-25T16:40:10.847 回答