JSFiddle - React, Tailwind, and code Playground
HTML
Array A:<div id="select_container">
<select id="select_box"></select>
</div>
Array B:<div id="array_B"></div>
Values from B which are not equal to what you selected: <div id="uniques"></div>
JavaScript
var arrA = [1, 2, 3, 4];
var arrB = [1, 5, 6, 7];
var BArrLength = arrB.length;
var i;
var selectedFromA;
var uniqueArrB = [];
var selectContainer = $('#select_container');
var htmlString = '';
$.each(arrA, function(index, value){
htmlString += '<option value="'+value+'">'+value+'</option>';
});
$('#select_box').append('<option></option>'+htmlString);
$.each(arrB, function(index, value){
$('#array_B').append(value);
});
$('#select_box').html(htmlString);
$('#select_container').on('change', 'select', function(){
selectedFromA = $('#select_box option:selected').val();
$('#uniques').html("");
for(i = 0; i < BArrLength; i += 1){
if(arrB[i] != selectedFromA){
$('#uniques').append(''+arrB[i]);
}
}
});