如何在下拉列表/选择列表列表中添加复选框选中的项目

Question

I am creating customer profile page in ASP.Net Core MVC. In Customer profile I give list of available currencies (in checkboxes) from which we can choose in which currencies this customer can deal with us.

I want to set one default currency from checked checkboxes, for this I have created dropdown list and I want to fill the dropdown list with all the checked currencies, so that from this dropdown I will choose one default currency.

Can some one provide Javascript to fill the dropdown list as per selected checkboxes.

            @for (int j = 0; j < Model.Currency.Count(); j++)
            {
                <tr>
                    <td>
                        @Html.CheckBoxFor(m => m.Currency[j].Checked)
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.Currency[j].Name)

                        @Html.HiddenFor(m => m.Currency[j].Id)
                        @Html.HiddenFor(m => m.Currency[j].Name)
                    </td>
                </tr>
            }
        </table>
      <div class="col-5">
            <select id="Default_Currency"
                    asp-for="DefaultCurrency"
                    asp-items=""
                    class="form-control">

            </select>
        </div>

Answer 1

According to your description, I suggest you could try to add the select options by using jquery.

More details, you could refer to below codes:

<table>
        @for (int j = 0; j < Model.Currency.Count(); j++)
        {
            <tr>
                <td>
                    @Html.CheckBoxFor(m => m.Currency[j].Checked, new { @class = "ckbox" })
                </td>
                <td>
                    @Html.DisplayFor(m => m.Currency[j].Name)

                    @Html.HiddenFor(m => m.Currency[j].Id)
                    @Html.HiddenFor(m => m.Currency[j].Name)
                </td>
            </tr>
        }
</table>
<div class="col-5">
    <select id="Default_Currency"
            class="form-control">
    </select>
</div>


@section scripts{
    <script type="text/javascript">

        $(
            function () {
                $(".ckbox").each(function () {
                    var selectedtext = ($(this).parent().next().text());
                    if ($(this).is(':checked')) {
                        $("#Default_Currency").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
                    } else {
                        $('option[value*="' + selectedtext + '"]').remove();
                    }
                }); 

            });

        $(".ckbox").change(function (e) {
            var selectedtext = ($(this).parent().next().text());
                 if ($(this).is(':checked')) {
                    $("#Default_Currency").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
                } else {
                    $('option[value*="' + selectedtext + '"]').remove();
                }
            });
    </script>
}

Result: