选择2下拉菜单，不提供所选项目的ID，我如何访问控制器绑定

如何解决选择2下拉菜单，不提供所选项目的ID，我如何访问控制器绑定

由于某种原因，我选择无法访问id值，因此我已经设置了几个县，因此我正在使用https://select2.org/下拉菜单来显示国家/地区的图像

<script>
 $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    var isoCountries = [
        { id: 1,flag: 'af',text: 'Afghanistan' },{ id: 2,flag: 'ax',text: 'Aland Islands' },{ id: 3,flag: 'al',text: 'Albania' },{ id: 4,flag: 'dz',text: 'Algeria' },{ id: 5,flag: 'as',text: 'American Samoa' },{ id: 6,flag: 'ad',text: 'Andorra' },{ id: 7,flag: 'ao',text: 'Angola' },]; 

function formatCountry(country) {
    if (!country.id) { return country.text; }
    var $country = $(
        '<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
        '<span class="flag-text">' + country.text + "</span>"
    );
    return $country;
};

//Assuming you have a select element with name country
// e.g. <select name="name"></select>

$("[name='Flag']").select2({
    placeholder: "Please Select a country",templateResult: formatCountry,data: isoCountries
});
<script>

当我查看生成的内容的下拉菜单时，选择要生成的内容。

<div class="form-group">
    @Html.LabelFor(m => m.CountryOfBirth)
    <span asp-validation-for="CountryOfBirth" class="text-danger"></span>
    <select asp-for="CountryOfBirth" name="CountryOfBirth" id="CountryOfBirth" class="form-control select2" style="height:35px" name="Flag">
        <option>Please select Country Of Birth</option>
    </select>
    <span asp-validation-for="CountryOfBirth" class="text-danger"></span>
</div>

并以这种方式生成，因此在html中的位置是所选项目的ID，因此控制器将如何绑定该项目

<span class="selection"><span class="select2-selection select2-selection--single" role="comboBox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-CountryOfBirth-container">

<span class="select2-selection__rendered" id="select2-CountryOfBirth-container" role="textBox" aria-readonly="true" title="United Kingdom">United Kingdom</span>

<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span> 

解决方法

<select asp-for="CountryOfBirth" name="CountryOfBirth" id="CountryOfBirth" class="form-control select2" style="height:35px" name="Flag">

从上面的代码中，您为select标签设置了三次名称属性。

• asp-for =“ CountryOfBirth”
• name =“ CountryOfBirth”
• name =“标志”

只需保留asp-for并删除其他人即可。 asp-for属性将指定的模型属性的名称提取到呈现的HTML中。

查看代码

   <div class="form-group">
        @Html.LabelFor(m => m.CountryOfBirth)
        <span asp-validation-for="CountryOfBirth" class="text-danger"></span>
        <select asp-for="CountryOfBirth" class="form-control select2" style="height:35px">
            <option>Please select Country Of Birth</option>
        </select>
        <span asp-validation-for="CountryOfBirth" class="text-danger"></span>
    </div>

JS代码

<script>
    $(function () {
        //Initialize Select2 Elements
        //$('.select2').select2();
        var isoCountries = [
            { id: 1,flag: 'af',text: 'Afghanistan' },{ id: 2,flag: 'ax',text: 'Aland Islands' },{ id: 3,flag: 'al',text: 'Albania' },{ id: 4,flag: 'dz',text: 'Algeria' },{ id: 5,flag: 'as',text: 'American Samoa' },{ id: 6,flag: 'ad',text: 'Andorra' },{ id: 7,flag: 'ao',text: 'Angola' },];

        function formatCountry(country) {
            if (!country.id) { return country.text; }
            var $country = $(
                '<span class="flag-icon flag-icon-' + country.flag + ' flag-icon-squared"></span>' +
                '<span class="flag-text">' + country.text + "</span>"
            );
            return $country;
        };

        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>
        $("[id='CountryOfBirth']").select2({
            placeholder: "Please Select a country",templateResult: formatCountry,data: isoCountries
        });

        $('#CountryOfBirth').val(@Model.CountryOfBirth); //init option
        $('#CountryOfBirth').trigger('change');

    });
</script>

结果测试