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

Question

我正在 ASP.Net Core MVC 中创建客户资料页面。在客户资料中，我给出了可用货币列表（在复选框中），我们可以从中选择该客户可以与我们交易的货币。

我想从选中的复选框中设置一种默认货币，为此我创建了下拉列表，并且我想用所有选中的货币填充下拉列表，以便从此下拉列表中选择一种默认货币。

有人可以根据选定的复选框提供 Javascript 来填充下拉列表吗？

            @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>

标签： javascriptasp.net-coreasp.net-core-mvcdom-events

Answer 1

根据您的描述，我建议您可以尝试使用 jquery 添加选择选项。

更多细节，您可以参考以下代码：

<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>
}

结果：