问题描述
由于某种原因,我选择无法访问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>
结果测试