Develop Reference

add badges to select in bootstrap (v5.2)

I'm working with the latest version of Bootstrap v5.2 and Vue 3 (just for understanding).
I've found a similar question on Stackoverflow but this was with an older version of Bootstrap.
I have a select and I want to add my id of my element from my v-for as a badge (Documentation: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of the upcoming text of my element.
My code:
<div class="row mt-3">
<div class="col-12">
<span>Select with Badge</span>
<select class="form-select" v-model="test_select_badge">
<option v-for="element in select_array" :key="element.id" :value="element.id">
<span class="badge text-bg-primary me-2">{{element.id}}</span>{{element.text}}
</option>
</select>
</div>
</div>
But this is not working out. How can I achieve my goal? Thank You.

I've used an dropdown and desigend it like a select. Than it worked out for me.

Bootstrap Form Helper - Select country dynamically on Country picker

I'm using country picker from Bootstrap form helper:
Country Picker
Problem is that i need to initialize it dynamically with a country. I'm using data-country="US" as default, anyways i need to change it on document ready function.
<div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>

From the Example 3, you can use
$(document).ready(function(){
$('#country-select').bfhcountries({country: 'TN'});
});
$('#LoadCountry').click(function(){
$('#countries1').bfhcountries({country: 'TN'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>
<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>

use the html below to select a default country on initialize. Also add bootstrap-formhelpers.js and bootstrap-formhelpers.css to your html or your select will not be populated with data.
<form><select id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>
and to select a country after initialization,
$('#country-select').val('TN');
see the document for more options on initilization.
Here's a working fiddle.
Per OP's comment The OP is using a theme using select2, quoting from there
Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.
and therefore to reflect changes;
$('#country-select').val('TN').trigger('change');

Cannot populate dropdown from Javascript Semantic UI

I have a dropdown which i am trying to populate from the javascript. But i am unable to do it.
This is my HTML
<div class="ui fluid search selection dropdown values">
<input type="hidden" name="values" selectOnBlur={false}>
<i class="dropdown icon"></i>
<div class="default text">Select a category</div>
<div class="menu">
</div>
</div>
And this is the JS
$('.ui.dropdown.values').dropdown({values:[{name:"oi",value:32},{name:"yo",value:2}]})
Please find the codepen link below
CodePen
Thanks

Can be fixed by changing versions to:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/semantic-ui#2.2.13/dist/semantic.min.js
Because the dropdown library's version you used didn't support populating via JS (as per docs)

How to handle Angularjs / Javascript dropdown using Python / Selenium webdriver?

i want to automate some browser tasks using Python and Selenium webdriver on Chromium browser. My python script is already able to login, navigate to a subpage / do some clicks, and insert something into a form.
My problem is a mandatory dropdown list where i have to choose something before i can go on. I think the webpage contains angularjs / javascript at that point (third line in the code below) to create the dropdown, and i don't know how to handle that.
Problem seem to be 1) to locate the element (xpath seems to change sometimes), and 2) i'm unable to click or send keys to what i've found. Also i've tried some kinds of "WebDriverWait" and sleep commands and "wait.until(expected_conditions.visibility_of_element_located((By.XPATH, ...))"... no luck so far.
Is it at all possible to solve that problem with just Python and Selenium?
Or do i need something like Protractor (and does Protractor just works with Javascript commands)? Also i've seen Pytractor...
I'm quite a Newbie concerning that stuff, could someone please explain what could be a good way to solve this problem? Thanks in advance... :)
Webpage code looks like this (grabbed using Firebug/Firepath):
<div class="ng-scope ng-isolate-scope" model-contains-key="true" ref="salutations" cat-input-select="editDetail.salutation">
<div id="s2id_autogen1" class="select2-container form-control ng-untouched ng-valid ng-dirty ng-valid-parse">
<a class="select2-choice select2-default" tabindex="-1" href="javascript:void(0)">
<span id="select2-chosen-2" class="select2-chosen"/>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation"/>
</span>
</a>
<label class="select2-offscreen" for="s2id_autogen2"/>
<input id="s2id_autogen2" class="select2-focusser select2-offscreen" type="text" role="button" aria-haspopup="true" aria-labelledby="select2-chosen-2"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label class="select2-offscreen" for="s2id_autogen2_search"/>
<input id="s2id_autogen2_search" class="select2-input" type="text" aria-autocomplete="list" aria-expanded="true" role="combobox" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" aria-owns="select2-results-2" placeholder=""/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox"/>
</div>
</div>
<select class="form-control ng-untouched ng-valid ng-dirty ng-valid-parse" ng-change="modelChanged(); changeCallback({value: selectValue.value})" ng-readonly="readonly" ng-disabled="disabled" ng-model="selectValue.value" ui-select2="{dropdownAutoWidth: 'true', allowClear: 'false'}" tabindex="-1" title="" style="display: none;">
<option value=""/>
<!-- ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Mr" value="Mr" ng-repeat="option in options">Mr</option>
<!-- end ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Ms" value="Ms" ng-repeat="option in options">Ms</option>
<!-- end ngRepeat: option in options -->
</select>
<!-- ngIf: infoText -->
</div>

In order to automate any webpage developed in Angular JS, we have to use an opensource tool "Protractor". Selenium itself won't be supporting the Angular JS web applications automation. For more information on Protractor, please refer to the below article
Testing Angular JS application using Protractor
The protractor also uses the same commands which selenium uses.
Hope this helps.

Applying javascript to generated content

Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.

If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.