Условное заполнение боксов

Question

У меня есть два списка, доступных и выбранных. Я хочу, чтобы я удалял любые доступные параметры для доступных, если существует в выбранном.

С моим кодом ниже все предметы помещаются в имеющиеся и нет в выбранном. Что я делаю не так?

var availableTags = []; 
var selectedTags = []; 

var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]'; 
var jsonSelected = '[{"id":"4","name":"Four"}]'; 

availableTags = $.parseJSON(jsonAvailble); 
selectedTags = $.parseJSON(jsonSelected); 

for (var i = 0; i < availableTags.length; ++i) { 

    //console.log($.inArray(availableTags[i].id, selectedTags)); 

    if ($.inArray(availableTags[i].id, selectedTags) >= 0) { 

     $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
    } 
    else{ 
     $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
    } 
} 

Answer 1

Попробуйте это:

var availableTags = []; 
 
var selectedTags = []; 
 

 
var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]'; 
 
var jsonSelected = '[{"id":"4","name":"Four"}]'; 
 

 
availableTags = $.parseJSON(jsonAvailble); 
 
selectedTags = $.parseJSON(jsonSelected); 
 
var selectedTags1=selectedTags.map(function(d) { return d['id']; }); 
 
for (var i = 0; i < availableTags.length; ++i) { 
 

 
    if ($.inArray(availableTags[i].id, selectedTags1) != -1) { 
 

 
     $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
 
    } 
 
    else{ 
 
     $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    Selected:<select id="lstSelectedTags"></select> 
 

 
Available:<select id="lstAvailableTags"></select>

Answer 2

Вы можете использовать фильтр на availableTags для желаемого результата

В ниже рабочего примера, я фильтрующее все эти элементы в доступных тэгах, для которых значение присутствует в выбранных тагах.

var availableTags = []; 
 
var selectedTags = []; 
 

 
var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]'; 
 
var jsonSelected = '[{"id":"4","name":"Four"}]'; 
 

 
availableTags = $.parseJSON(jsonAvailble); 
 
selectedTags = $.parseJSON(jsonSelected); 
 

 

 
availableTags = availableTags.filter(function(elem) { 
 

 
    if ($.grep(selectedTags, function(e) { 
 
    return e.id == elem.id 
 
    }).length == 0) return elem; 
 

 
}); 
 

 

 
console.log(availableTags);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Или, идя старой школы:

var availableTags = []; 
 
var selectedTags = []; 
 

 
var jsonAvailble = '[{"id":"1","name":"One"},{"id":"2","name":"Two"},{"id":"3","name":"Three"},{"id":"4","name":"Four"}]'; 
 
var jsonSelected = '[{"id":"4","name":"Four"}]'; 
 

 
availableTags = $.parseJSON(jsonAvailble); 
 
selectedTags = $.parseJSON(jsonSelected); 
 

 
for (var i = 0; i < availableTags.length; ++i) { 
 
    for (var j = 0; j < selectedTags.length; ++j) { 
 
    console.log(availableTags[i].id + ", " + selectedTags[j].id) 
 
    if (availableTags[i].id === selectedTags[j].id) { 
 

 
     $('#lstSelectedTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
 
    } else { 
 
     $('#lstAvailableTags').append('<option value="' + availableTags[i].id + '">' + availableTags[i].name + '</option>'); 
 
    } 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="lstSelectedTags"> 
 

 
</select> 
 
<select id="lstAvailableTags"> 
 

 
</select>