如何跟踪 ul 更改并将 li 传递到 select 标签？

Question

我有一个<ul>和多个<li>可以增加或减少。 I want those <li> to be able to track and put on a select multiple so I can pass them into my controller, I'm working with Razor in ASP.NET Core. 问题是我无法将它们传递给我的选择，因为我不知道当<ul>中的项目发生变化时如何触发函数/事件。 <ul>由InvokeAsync生成到不同的组件，因此我无法直接获取它们，但必须从我的本地 razor 页面干扰。

我的 HTML：

<ul class="select2-selection__rendered">
   <li class="select2-selection__choice" title="(1098)TH.FA02-Crushing Machine" data-select2-id="101"><span class="select2-selection__choice__remove" role="presentation">×</span>(1098)TH.FA02-Crushing Machine</li>
   <li class="select2-selection__choice" title="(1097)TH.FA02-Juicing Machine" data-select2-id="102"><span class="select2-selection__choice__remove" role="presentation">×</span>(1097)TH.FA02-Juicing Machine</li>
   <li class="select2-selection__choice" title="(1097)TH.FA02-Harvesting Machine" data-select2-id="103"><span class="select2-selection__choice__remove" role="presentation">×</span>(1097)TH.FA02-Harvesting Machine</li>
   <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>

<select asp-for="MachineModel.MachineProduct" hidden multiple id="selectHidden"></select>

我的 JS：

$('.select2-selection__rendered').click(function () {
   $('#selectHidden').empty();
   $('.select2-selection__rendered li').each(function () {
       $('#selectHidden').add(new Option($(this).attr('title'), $(this).attr('data-select2-id')));
   });
});

Answer 1

我每次都这样，这对你一定有帮助；

$('#selectHidden').append('<option value="'+valueFromEach+'" data-select2-id="'+idFromEach+'"></option>')