Inputgroup with selected item to populate readonly field in Bootstrap 4.5.3

Question

I'm trying to make the following work and need some help please.

Bootstrap 4.5.3 select group. I saw a robot voice video on YouTube and it successfully showed the multiselect group working "with" a small description of the item under it. Like small/muted tag. date-description="something" used in achieving that function. My list is single select only with search function. After lot of searching I used SelectPicker to make it work. Long story short, Have a Codeply fiddle to show you where I have gotten so far.

Select Group with search to populate readonly box next to it.

I have the full list of cities working like a charm. Readonly box set. data-description tag is not working, maybe its not supported anymore? I tried to look up but nothing. Because data-description is not working or supported (whichever is the case) I made a readonly box to show lets say if city of Bath is selected the region its in automatically shown in region field stating South West. I have only made list of cities of England so far. Got stuck on this and didn't finish Scotland & Wales. Been trying to search for a solution.

Also if SelectPicker is the best option to go with over boot-select.

Thank you.

Answer 1

Here is the code snippet/code. I found a seven year old question on here and I tried to implement it to my question. It worked. I changed jQuery version and Bootstrap version to 4.5.3 and it still works (not complaining just surprised to be honest).

I don't know if this merits as answer or not to be honest but it's a solution apart from readonly bit of my original question. Selection of City changes the Region. Only thing is that if possible to have an input-group showing the region rather then drop down menu. Input-group can be made readonly and they are dark grey and dim and sort of serves better.

Also if this code which is seven year old form this question needs an upgrading?

jQuery(function($) {
    var locations = {
        'Bath': ['South West'],
        'Birmingham': ['West Midlands'],
        'Bradford': ['Yorkshire and the Humber'],
        'Brighton & Hove': ['South West'],
        'Bristol': ['South West'],
        'Cambridge': ['East'],
        'Canterbury': ['South West'],
        'Carlisle': ['North West'],
        'Chelmsford': ['East'],
        'Chester': ['North West'],
        'Chichester': ['South East'],
        'Coventry': ['West Midlands'],
        'Derby': ['SEast Midlands'],
        'Durham': ['North East'],
        'Ely': ['East'],
        'Exeter': ['South West'],
        'Gloucester': ['South West'],
        'Hereford': ['West Midlands'],
        'Kingston-upon-Hull': ['Yorkshire and the Humber'],
        'Lancaster': ['North West'],
        'Leeds': ['Yorkshire and the Humber'],
        'Leicester': ['East Midlands'],
        'Lichfield': ['West Midlands'],
        'Lincoln': ['East Midlands'],
        'Liverpool': ['North West'],
        '(City of) London': ['London'],
        'Manchester': ['North West'],
        'Newcastle-upon-Tyne': ['North East'],
        'Norwich': ['East'],
        'Nottingham': ['East Midlands'],
        'Oxford': ['South East'],
        'Peterborough': ['East'],
        'Plymouth': ['South West'],
        'Portsmouth': ['South East'],
        'Preston': ['North West'],
        'Ripon': ['Yorkshire and the Humber'],
        'Salford': ['North West'],
        'Salisbury': ['North West'],
        'Sheffield': ['Yorkshire and the Humber'],
        'Southampton': ['South East'],
        'St Albans': ['East'],
        'Stoke-on-Trent': ['West Midlands'],
        'Sunderland': ['North East'],
        'Truro': ['South West'],
        'Wakefield': ['Yorkshire and the Humber'],
        'Wells': ['South West'],
        '(City of) Westminster': ['London'],
        'Winchester': ['South East'],
        'Wolverhampton': ['West Midlands'],
        'Worcester': ['West Midlands'],
        'York': ['Yorkshire and the Humber'],
    }

    var $locations = $('#location');
    $('#city').change(function() {
        var city = $(this).val(),
            lcns = locations[city] || [];

        var html = $.map(lcns, function(lcn) {
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        $locations.html(html)
    });
});

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container py-2">
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="city">City</label>
                <select class="form-control" id="city" name="city">
                    <option> Select your city</option>
                    <optgroup label="England">
                        <option>Bath</option>
                        <option>Birmingham</option>
                        <option>Bradford</option>
                        <option>Brighton &amp; Hove</option>
                        <option>Bristol</option>
                        <option>Cambridge</option>
                        <option>Canterbury</option>
                        <option>Carlisle</option>
                        <option>Chelmsford</option>
                        <option>Chester</option>
                        <option>Chichester</option>
                        <option>Coventry</option>
                        <option>Derby</option>
                        <option>Durham</option>
                        <option>Ely</option>
                        <option>Exeter</option>
                        <option>Gloucester</option>
                        <option>Hereford</option>
                        <option>Kingston-upon-Hull</option>
                        <option>Lancaster</option>
                        <option>Leeds</option>
                        <option>Leicester</option>
                        <option>Lichfield</option>
                        <option>Lincoln</option>
                        <option>Liverpool</option>
                        <option>(City of) London</option>
                        <option>Manchester</option>
                        <option>Newcastle-upon-Tyne</option>
                        <option>Norwich</option>
                        <option>Nottingham</option>
                        <option>Oxford</option>
                        <option>Peterborough</option>
                        <option>Plymouth</option>
                        <option>Portsmouth</option>
                        <option>Preston</option>
                        <option>Ripon</option>
                        <option>Salford</option>
                        <option>Salisbury</option>
                        <option>Sheffield</option>
                        <option>Southampton</option>
                        <option>St Albans</option>
                        <option>Stoke-on-Trent</option>
                        <option>Sunderland</option>
                        <option>Truro</option>
                        <option>Wakefield</option>
                        <option>Wells</option>
                        <option>(City of) Westminster</option>
                        <option>Winchester</option>
                        <option>Wolverhampton</option>
                        <option>Worcester</option>
                        <option>York</option>
                    </optgroup>
                    <optgroup label="Scotland">
                        <option>Aberdeen City</option>
                        <option>Dundee City</option>
                        <option>City of Edinburgh</option>
                        <option>Glasgow City</option>
                        <option>Highland</option>
                        <option>Perth and Kinross</option>
                        <option>Stirling</option>
                    <optgroup label="Wales">
                        <option>Bangor</option>
                        <option>Cardiff</option>
                        <option>Newport</option>
                        <option>St Asaph</option>
                        <option>St Davids</option>
                        <option>Swansea</option>
                    </optgroup>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="container py-2">
    <div class="row">
        <div class="col">
            <div class="form-group">
                <label for="region">Region</label>
                <select class="form-control" id="location" name="location">
                    <option> Your region is </option>
                </select>
            </div>
        </div>
    </div>
</div>

Your input is appreciated. Have a nice weekend all.