ViewComponent will not allow manipulation of DOM

问题

In my .net MVVM application I have several view components that are used to render dropdownlists populated from the database. I have discovered that I'm unable to manipulate (re-select) items in the drop down list through jquery after they are rendered. Can anyone explain why this is?

View component

@using ViewComponents
@model XXX.Source

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

Calling the view component:

<vc:source is-multiple="true" field-name="Source"></vc:source>

View Component:

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);

        }

    }
}

What I'm trying to do in javascript which will not work -- has no effect whatsoever -- is to re-select the multi-selected options after the post. Here's what I'm doing in javascript:

 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"));

If I attempt this against a manually-created dropdownlist it works fine.

Rendered component on the page looks like this:

<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>

Please note that when I run this populateSelect I get the appropriate data in the alert debug boxes so the values are there, and no errors when setting the option to selected... but on manually created dropdowns it actually re-selects the options whereas on the viewcomponent dropdown it does nothing.

来源：https://stackoverflow.com/questions/59564639/viewcomponent-will-not-allow-manipulation-of-dom