由于某些原因,我选择无法访问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
并删除其他人即可。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] 删除。
我来说两句