jQuery追加下拉列表,但追加的项在回发时消失

cnh2zyt3  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(198)

我正在使用jQuery将项目添加到下拉列表中。值来自页面上的文本框。下面是我使用的代码:

$('#ddlProjectName').append( new Option($('#txtNewProjectName').val(), $('#txtNewProjectName').val()));
$('#ddlProjectName').val($('#txtNewProjectName').val());    //  select appended item

这似乎工作良好;我可以在下拉列表中看到新项目,它是当前选定的项目。但是当我在下拉列表中选择不同的项目时,我新添加的项目就不再存在了。我后面的代码中的C#也看不到。
问题是我的下拉列表是自动回发的(当我的用户做出选择时触发我的代码)。这就是清除附加项的原因,但我不知道该怎么做。
我也试过:

$('#ddlProjectName').val($('#txtNewProjectName').val()).trigger('change');

没有运气。我看过这个网站,我真的认为this post会让我在某个地方,但我不明白答案。
任何想法都值得赞赏。

cigdeys3

cigdeys31#

正如您所描述的,您的下拉列表在选择后会更新。所以...
一个最佳的方法是一步一步地调试,找到下拉更新的位置,并在该事件后调用添加代码的选项。
如果你无法控制它,或者你想成为一个不可知论者(你的代码不关心你的下拉菜单更新了什么),使用MutationObserver来观察你的下拉菜单的更新。

// code you don't control

const fillSelect = () => 'name1 name2 name3'.split(' ').forEach(
  text => $('<option>', {value: text, text}).appendTo('select')
);

// this erases the options and fills them again thus destroying your extra options
$('select').on('change', () => $('select').empty() + fillSelect() + console.log('cleared by 3rd party'));

fillSelect();

// code you control

const appendSelect = () => {

  'append1 append2 append3'.split(' ').forEach(
    text => $('<option>', {value: text, text}).appendTo('select')
  );
  
  $('select').val('append3');
  console.log('appended extra options and set value');
};

appendSelect();

const observer = new MutationObserver(() => observer.disconnect() + appendSelect() + observe());

const observe = () => observer.observe($('select')[0], { childList: true });

observe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select></select>

相关问题