locked
Select 2 dropdown storing flag name and id how RRS feed

  • Question

  • User-183185495 posted

    I am using select 2 to give myself a country list found in another so post but I need some way of being able to select the flag that i am using in edit mode. The dropdown is built up as such , the country is shorted for completeness of this question. I am using asp.net core 3.1.7 and ef core 3.1.

    Then in my edit page I have the following.

    <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" name="Flag">
            <option>Please select Country Of Birth</option>
        </select>
        <span asp-validation-for="CountryOfBirth" class="text-danger"></span>
    </div>

    As you can see right away the issue is that I am storing a Country string rather than an id in the iso countries Variable however that doesnt work as I would need a id to be able to bind to the Select above.

    But i need the country string to be able to pic up the flag in the flags.css file that i am using from here https://github.com/lipis/flag-icon-css

    In My Javascript

    <script>
     $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()
        var isoCountries = [
            { id: 'Uk', text: 'United Kingdom' },
            { id: 'US', text: 'United States' }
     ];
    
    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> </div>

    Wednesday, August 26, 2020 7:23 PM

All replies

  • User-17257777 posted

    Hi roguenidb,

    So you want a int number as the id? You can add another attribute to the isoCountries to store the flag-icon information.

    <script>
        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2()
            var isoCountries = [
                { id: 1, abbreviation: "gb", text: 'United Kingdom' },
                { id: 2, abbreviation: "us", text: 'United States' },
            ];
    
            function formatCountry(country) {
                if (!country.id) { return country.text; }
                var $country = $(
                    '<span class="flag-icon flag-icon-' + country.abbreviation + ' flag-icon-squared"></span>' +
                    '<span class="flag-text">' + country.text + "</span>"
                );
                return $country;
            };
    
            $("[name='Flag']").select2({
                placeholder: "Please Select a country",
                templateResult: formatCountry,
                data: isoCountries
            });
    
            $('#CountryOfBirth').on('change', function () {
                console.log($(this).val())
            })
        });
    </script>

    Result:

    Best Regards,

    Jiadong Meng

    Thursday, August 27, 2020 6:05 AM
  • User-183185495 posted

    Its still not allowing me get the variable in the controller i am using the bind method from the generated code and i cant get access to the value id

    For example the generated info for the select will be 

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

    jiadongm

    Hi roguenidb,

    So you want a int number as the id? You can add another attribute to the isoCountries to store the flag-icon information.

    <script>
        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2()
            var isoCountries = [
                { id: 1, abbreviation: "gb", text: 'United Kingdom' },
                { id: 2, abbreviation: "us", text: 'United States' },
            ];
    
            function formatCountry(country) {
                if (!country.id) { return country.text; }
                var $country = $(
                    '<span class="flag-icon flag-icon-' + country.abbreviation + ' flag-icon-squared"></span>' +
                    '<span class="flag-text">' + country.text + "</span>"
                );
                return $country;
            };
    
            $("[name='Flag']").select2({
                placeholder: "Please Select a country",
                templateResult: formatCountry,
                data: isoCountries
            });
    
            $('#CountryOfBirth').on('change', function () {
                console.log($(this).val())
            })
        });
    </script>

    Result:

    Best Regards,

    Jiadong Meng

    Thursday, August 27, 2020 8:57 PM