獲取取消選項的值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> 

對於每個選項添加到列表2，我還加入了一類具有對應於所述列表2值列表1的值。

對於加載元件，用於選擇的選項中，我使用的代碼：

$('#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中列表2？

即，當一個選項未被選中時，我想刪除list2中具有未選定元素的類值的所有元素。

注意：在fetchlist2中獲取列表的操作非常昂貴，因此我想要處理javascript中元素的刪除操作。

Answer 1

對不起，如果我無法正確表達我的問題。

這些是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); 
      } 
     } 
     }); 
     } 

Answer 2

你可以試試這個，如果你只是想從列表1未選擇的選項，從列表2中刪除：

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