Value from asp-route-id dynamically

Hey guys,

How can I select an item on <select> object and send it's value to an asp-route-id?

I have this code:

<div class="col-8 p-0" style="margin-left:-16px;"><select id="slctProcedure" class="form-control selectpicker" data-live-search="true" asp-items="@ViewBag.Procedures" onchange="onSelectedIndexChanged(this)"><option value="-1" selected>---------</option></select></div><div class="col-2"><a id="btnAddProcedure" class="btn btn-outline-primary" asp-controller="CustomerService" asp-action="AddProcedureToAppointment" asp-route-id="@ProcedureID" style="border-radius:30px;"><i class="fas fa-plus"></i></a></div><script>    function onSelectedIndexChanged(value) {        var textValue = value.options[value.selectedIndex].value;        document.getElementById("ProcedureID").value = textValue;         $("btnAddProcedure").attr("asp-route-id", document.getElementById("ProcedureID").value);            }</script>

My controller:

public async Task<IActionResult> AddProcedureToAppointment(string id){
...
}

But when I click in <a> I only get zero (initial value of @ProcedureID) not the value on <select>. What I'm doing wrong? How can I do this?

How can I do this?