Javascript ViewComponent将不允许操作DOM

在.NETMVVM应用程序中，我有几个视图组件，用于呈现从数据库填充的DropDownList。我发现，在呈现下拉列表中的项之后，我无法通过jquery操作（重新选择）它们。有人能解释为什么会这样吗

视图组件

@using ViewComponents
@model XXX.Source

@Html.DropDownList(Model.FieldName, new List<SelectListItem>(Model.OptionList),
"Choose",
new {
   @multiple = "multiple",
   @class = "input-sm"
   }

如果我尝试对手动创建的dropdownlist执行此操作，效果很好

页面上呈现的组件如下所示：

<select class="input-sm" id="Source" multiple="multiple" name="Source" size="4">
<option value="">Choose</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
</select>

选择
选择1
选择2
选择3
选择4
选择5
选择6
选择7

---

请注意，当我运行此populateSelect时，我会在警报调试框中获得相应的数据，因此这些值存在，并且在将选项设置为selected时没有错误。。。但在手动创建的下拉列表中，它实际上会重新选择选项，而在viewcomponent下拉列表中，它什么也不做。

您能显示浏览器为此接收的呈现HTML吗？（在大多数浏览器中使用Ctrl+U）添加到我的问题中。您是否将

会话存储.getItem（“源”）

的值设置为

1,2,3

？我使用

Default.cshtml

Choose

中的按钮尝试了您的代码，但没有任何问题。您是否将其作为viewcomponent的一部分进行了尝试？那是不起作用的。将它设置为一个独立的dropdownlist对我来说也很好。@GeorgeHarris:这不能像静态HTML那样工作，而不能像

视图组件那样工作。当jQuery代码运行时，
ViewComponent
已经执行并将其输出呈现为静态HTML。因此，您的测试之间呈现的HTML中一定存在一些差异。为了安全起见，在工作输出和中断输出之间运行一个
diff
，以尝试识别可能存在的差异，这可能很有用。

using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;


using static XXX.Source;


namespace XXX.ViewComponents
{

    public class SourceViewComponent : ViewComponent
    {
        private readonly IService _Service;

        public SourceViewComponent(IService Service)
        {
            _Service = Service;
        }
        public async Task<IViewComponentResult> InvokeAsync(string fieldName, bool isMultiple = false )
        {

            Source viewModel  = new Source();

            var items = await _Service.GetSourceAsync();
            viewModel.IsMultiple = isMultiple;
            viewModel.FieldName = fieldName;

            viewModel.OptionList =
                from c in items
                select new SelectListItem
                {
                    Value = c.SourceId.ToString(),
                    Text = c.SourceName
                };

            return View(viewModel);

        }

    }
}

 function populateSelect(fldname, value) {
            alert("Inside populateSelect field " + fldname + " value is [" + value + "]");
            $.each(value.split(","), function (i, e) {   
                alert("setting " + fldname + " to " + e + " selected");
                $("#" + fldname + " option[value='" + e + "']").prop("selected", "selected");
            });
            $(fldname).prop("multiple", "multiple");
        }

   populateSelect("Source", sessionStorage.getItem("Source"));


<select class="input-sm" id="Source" multiple="multiple" name="Source" size="4">
<option value="">Choose</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
</select>