1

依存リスト用の選択ボックスが 2 つあるフォームがあります。

複数選択である最初のリストで選択された値に基づいて、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;

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

list1 で選択されていない要素を list2 から削除する方法はありますか?

つまり、オプションが選択されていない場合、選択されていない要素のクラス値を持つ 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 から選択されていない要素の値であるクラスを持つ option 要素を削除したいだけの場合:

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

問題を適切に表現できなかった場合は申し訳ありません。

これらは 2 つの異なるリストであり、最初のリストの値によって 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);
            }
        }
        });
      }
于 2013-03-25T16:40:10.847 に答える