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

结果检验

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap JQuery:对所选项目的下拉菜单验证

如何从Bootstrap 4下拉项目菜单显示所选项目

如何使用PHP从下拉菜单中获取所选项目的值

Angular2下拉菜单恢复为先前选择的选项

无法在Select2下拉菜单中选择项目

聚合物1.0:如何在纸张下拉菜单中获取所选项目的值?

页面加载时具有相同选择选项的JavaScript / jQuery 2下拉菜单

无法获取下拉菜单中所选项目的价值

按下选项卡时如何在焦点上打开select2下拉菜单

jQuery 2下拉列表,从下拉列表2中删除所选项目1

在选择另一个select2下拉菜单时重置一个select2下拉菜单的元素

如何获取微调器中所选项目的ID?

如何在Bootstrap下拉菜单的标签中显示所选项目?

如何配置NgbDropdown以显示下拉菜单中的所选项目

如何在reactstrap下拉菜单中设置所选项目?

如何在Excel的ActiveX下拉菜单中保存所选项目

如何将选定的项目从angular-ui下拉菜单发送回角度控制器

如何根据所选文本绑定下拉菜单

如何使用Jquery控制下拉菜单选择选项菜单

带硒的select2下拉菜单

如何实现Bootstrap 2.3.3下拉菜单

如何左对齐bootstrap 3下拉菜单?

在选择菜单中添加所选项目的列表

如何捕捉select2下拉菜单的宽度?

如何在select2下拉菜单中换行?

当下拉菜单具有相同的ID时,如何从下拉菜单中选择一个选项

我们如何获取控制器内部项目的ID?

如何在下拉菜单中更改选择列表项目的字体

下拉菜单未显示所选选项