Hi rani,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<select name="ddl1" id="ddl1">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 8">Item 8</option>
</select>
<select name="ddl2" id="ddl2">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 5">Item 5</option>
<option value="Item 6">Item 6</option>
</select>
<select name="ddl3" id="ddl3"></select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr1 = [];
var arr2 = [];
$.each($('#ddl1 option'), function () {
arr1.push($(this).val());
});
$.each($('#ddl2 option'), function () {
arr2.push($(this).val());
});
var diff1 = arr1.difference(arr2);
var diff2 = arr2.difference(arr1);
var ddl3 = $('#ddl3');
for (var i = 0; i < diff1.length; i++) {
var option = document.createElement("OPTION");
option.innerHTML = diff1[i];
option.value = diff1[i];
ddl3[0].options.add(option);
}
for (var i = 0; i < diff2.length; i++) {
var option = document.createElement("OPTION");
option.innerHTML = diff2[i];
option.value = diff2[i];
ddl3[0].options.add(option);
}
});
Array.prototype.difference = function (a) {
return this.filter(function (i) {
return a.indexOf(i) < 0;
});
};
</script>
</body>
</html>
Screenshot
