Question

我有下面的HTML可以正常工作，但是当我使用Chosen渲染下拉列表时，它停止工作。因为选择不更新实际的下拉值，所以它将创建自己的元素来保存选择的值。但是我无法访问它，那么如何触发onchange事件呢？

<select id="search" single class="chosen-select" @onchange="UpdateValue" bind="@searchValue">
        ...
</select>
...In @Code
void UpdateValue(ChangeEventArgs e)
{
    searchValue = e.Value.ToString();
    ... 
}

现在，如果我使用选择的值初始化下拉列表，则无法检测到更改，但可以进行其他操作。我正在使用带有.net core 3.0.1的Blazor GL-服务器端

Answer 1

<select @bind="productInfo.CategoryId" 
                                           @bind:event="oninput"
                                @onchange="categoryClick"
                                           class="form-control">
                            @if (categories is null)
                            {
                                <p><em>Loading</em></p>
                            }
                            else
                            {
                                @foreach (var item in categories)
                                {
                                    <option value="@item.Id">@item.CategoryName</option>
                                }
                            }
                        </select>

Answer 2

我有同样的问题。我的临时解决方案是使用IJSRuntime作为该类型组件的手动绑定值，该值由第三js库（例如select2库）呈现。 -Component.razor：

<select id="Name" class="form-control select2">
    <option @key="key">...</option>
</select>

form.js：

window.forms = {

init: function () {
    $('.select2').select2();
},
selecte2BindOnChange2: function (id, dotnetHelper, nameFunc, namePro) {
$('#' + id).on('select2:select', function (e) {
    dotnetHelper.invokeMethodAsync(nameFunc, namePro, $('#' + id).val());
});

} }

类函数：

    public async Task InitFormAsync()
    {
        await _jSRuntime.InvokeVoidAsync("forms.init");
        var properties = this.GetType().GetProperties()
            .Where(c => c.GetCustomAttributes(false)
                .Any(ca => ca is FieldAttribute && ((FieldAttribute)ca).Type == FieldType.Combobox));
        foreach (var p in properties)
        {
            await _jSRuntime.InvokeVoidAsync("forms.selecte2BindOnChange2", p.Name, DotNetRef, "Change_" + this.GetType().Name, p.Name);
        }
    }

    [JSInvokable("Change_Model")]
    public void Change(string nameProperty, string value)
    {
        if (value == "null")
        {
            this.SetValue(nameProperty, null);
        }
        else
        {
            this.SetValue(nameProperty, value);
        }
    }

Answer 3

我通过在每个选项项上添加onclick事件来实现它的明显不同：

<select id="search" single class="chosen-select" value="@searchValue">
   @foreach(var value in values)
   {
      <option @onclick="() => OnItemClicked(value)>@value</option>
   }
</select>
@Code {
    private string searchValue;
    private IEnumerable<string> values = new string[]
    {
       // configure here your list of options
       "option1",
       "option2",
    }

    void OnItemClick(string value)
    {
       searchValue = value;
       StateHasChanged();
    }
}

选择的下拉值更改时，Blazor触发onchange事件

3 个答案: