我有下面的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-服务器端
<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>,
我有同样的问题。 我的临时解决方案是使用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);
}
}
我通过在每个选项项上添加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();
}
}