How can I populate the same value on the below dropdownlist

Question

enter image description here

enter image description here

I have here 2 viewbag in my controller

ViewBag.MyCategory = new SelectList(db.RecyclableType, "id", "type");
ViewBag.iddd = new SelectList(db.RecyclableType, "id", "type");

and a View

@Html.DropDownList("iddd", (IEnumerable<SelectListItem>)ViewBag.iddd, "SELECT ITEM TYPE", new { @class = "form-control" })
@Html.DropDownList("MyCategory", (IEnumerable<SelectListItem>)ViewBag.MyCategory, "SELECT ITEM TYPE", new { @class = "form-control"})

i tried to create a function like below but nothing is working

document.getElementById("iddd") = document.getElementById("MyCategory");

Answer 1

You can do it using jQuery

1. First on change of iddd dropdown get its value
2. Set the value to MyCategory dropdown and set the attribute to selected

$("#iddd").change(function () {
    var value = $("#iddd").val();
    $("#MyCategory").val(value).attr("selected", "selected");
});

Note: Add jQuery script file in head section

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