如何跟蹤 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>')