带有所选项目的输入组以填充 Bootstrap 4.5.3 中的只读字段

Question

我正在尝试完成以下工作，需要一些帮助。

Bootstrap 4.5.3 选择组。我在 YouTube 上看到了一个机器人语音视频，它成功地显示了多选组正在“处理”它下面的项目的一个小描述。像小/静音标签。 date-description="something" 用于实现该功能。我的列表是单选的，只有搜索功能。经过大量搜索后，我使用 SelectPicker 使其工作。长话短说，有一个 Codeply 小提琴向您展示我到目前为止的进展情况。

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

我有完整的城市列表。只读框集。数据描述标签不起作用，也许它不再受支持？我试着抬头看，但什么也没有。因为数据描述不起作用或不支持（无论哪种情况），我制作了一个只读框来显示让我们说如果选择巴斯市，它会自动显示在区域字段中，说明西南。到目前为止，我只列出了英格兰的城市。被困在这一点上，并没有完成苏格兰和威尔士。一直在寻找解决方案。

如果 SelectPicker 是通过引导选择的最佳选择。

谢谢。

Answer 1

这里是代码 sn-p/code。我在这里发现了一个七年前的问题，并尝试将其应用于我的问题。有效。我将 jQuery 版本和 Bootstrap 版本更改为 4.5.3，它仍然有效（不是抱怨，只是说实话很惊讶）。

说实话，我不知道这是否值得作为答案，但这是一个解决方案，除了我最初的问题的只读部分。城市的选择改变了地区。唯一的问题是，如果可能的话，要有一个显示区域的输入组，而不是下拉菜单。输入组可以设置为只读，它们是深灰色和暗淡的，并且服务更好。

另外，如果这个question 七年前的代码需要升级？

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/bootstrap@4.5.3/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>

感谢您的意见。祝大家周末愉快。