简体   繁体   English

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

[英]How do I track ul changing and passing li into a select tag?

I have a <ul> with multiple <li> that can be added more or subtract less.我有一个<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. 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. The problem is I can't pass them into my selection since I don't know how to trigger the function/event whenever the item inside <ul> changing.问题是我无法将它们传递给我的选择,因为我不知道当<ul>中的项目发生变化时如何触发函数/事件。 The <ul> is generated by InvokeAsync to a different Component so I can't grab them directly but must interfere from my local razor page. <ul>InvokeAsync生成到不同的组件,因此我无法直接获取它们,但必须从我的本地 razor 页面干扰。

My HTML:我的 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>

My JS:我的 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')));
   });
});

i used like that everytime, this must be help to you;我每次都这样,这对你一定有帮助;

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM