Blazor中Select组件事件不触发求助：Option的OnClick等事件无效

问题原因分析 #

1. @bind与手动事件冲突：你代码中同时使用了@bind和自定义OnSelect事件，Blazor的@bind会自动生成对应的onchange处理逻辑，手动添加的事件会被覆盖，导致自定义事件失效。
2. <option>的@onclick不被支持：浏览器原生下拉控件不会将点击事件传递到单个<option>标签上，所以绑定在option上的@onclick永远不会触发。

解决方案 #

方案1：移除@bind，手动绑定value和onchange

完全自定义下拉框的选中逻辑，直接控制值和事件：

@page "/dd"

<select class="form-control" value="@selectedString" @onchange="OnSelect" style="width:150px">
    @foreach (string template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>

@code {
    List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
    string selectedString = "America";
    string selectedStringDup = "";

    void OnSelect(ChangeEventArgs e)
    {
        selectedString = e.Value.ToString();
        Console.WriteLine("The selected country is : " + selectedString);
        // 执行选中后的自定义逻辑
        dosomething();
    }

    void dosomething()
    {
        selectedStringDup = "Russia" + DateTime.Now.ToString();
    }
}

方案2：使用@bind:after（Blazor 6.0+支持）

保留@bind的便捷性，同时指定选中后触发的方法：

@page "/dd"

<select class="form-control" @bind="@selectedString" @bind:after="OnSelected" style="width:150px">
    @foreach (string template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>

@code {
    List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
    string selectedString = "America";
    string selectedStringDup = "";

    void OnSelected()
    {
        Console.WriteLine("The selected country is : " + selectedString);
        dosomething();
    }

    void dosomething()
    {
        selectedStringDup = "Russia" + DateTime.Now.ToString();
    }
}

方案3：使用@bind:get和@bind:set（Blazor 7.0+支持）

通过自定义属性的get/set方法，在值变更时处理逻辑：

@page "/dd"

<select class="form-control" @bind:get="SelectedString" @bind:set="SetSelectedString" style="width:150px">
    @foreach (string template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

<h5>Selected Country is: @SelectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>

@code {
    List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
    private string _selectedString = "America";
    string selectedStringDup = "";

    public string SelectedString
    {
        get => _selectedString;
        set => SetSelectedString(value);
    }

    void SetSelectedString(string value)
    {
        _selectedString = value;
        Console.WriteLine("The selected country is : " + _selectedString);
        dosomething();
    }

    void dosomething()
    {
        selectedStringDup = "Russia" + DateTime.Now.ToString();
    }
}

注意事项 #

• 不要同时使用@bind和手动onchange事件，二者会产生冲突。
• 永远不要依赖<option>的@onclick事件，浏览器原生控件不支持这种交互方式。

内容的提问来源于stack exchange，提问作者Venkat