We Keep Coding

select2 does not render after the page loads completely

I got this problem with a wordpress plugin I’m working on. I tried using this on a local html page, and it works properly. Now, when I tried on a server with wordpress, I can see that it initializes, but after some miliseconds it gets replaced by the vanilla select menu. I don’t know what could be causing this. What do you fellas think?
edit: I'd also like to add that the way I see select2 works is that, once the document is ready, it injects its own select element into the document. This seems to happen in my page, but after the page has finished loading the element is gone.
The first menu is how it’s looking with select2. That’s fine. The second menu on the picture is how it ends up looking - a normal select element.
https://i.imgur.com/W2ALH8T.png And this is how the script looks like. Nothing complicated, just need to see it run properly first.
This snippet shows that the code is working properly, however i cannot seem to replicate what is happening on the site.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.country-switcher').select2();
});
</script>
<span class="widgettitle">SHIP TO:</span>
<div class="wc-price-based-country wc-price-based-country-refresh-area refreshed" data-area="widget" data-id="39ddbdcf9476789f65bca6d5b7cda228" data-options="{"instance":{"other_countries_text":"Other countries","title":"SHIP TO:","remove_other_countries":"1"},"id":"wcpbc_country_selector"}">
<select class="wcpbc-country-switcher country-switcher">
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU" selected="selected">Australia</option>
</select>
</div>
Any help on this issue would be greatly appreciated. Thanks, y’all!

Loading local storage items for multiple dropdown lists

I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});

Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.

Change style of drop down list box

I'm adding the following drop down to my page and I it's styled differently because of the fact that it's from an external javascript library.
<input type="hidden" name="country" id="countryId" value="US"/>
<select name="state" class="states order-alpha" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities order-alpha" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/statecity.js"></script>
It doesn't use the standard bootstrap style (it looks pretty old school). Any way I can style this using bootstrap?
As you can tell, I'm still new to this.

I don't have enough reputation to put a comment, so I'll post an answer.
If you're not comfortable with writing your own code (yet)
You can customize your bootstrap look here and download it after.
On the other hand
You should probably look for some beginner tutorials on CSS and HTML. :)

Jquery change function is not working on some server

This code works perfect on my localhost but not working on my clients site why ?
JQUERY
function someClickEventFunction(){
$("#checkin").val("2").change();
}
HTML
<select id="checkin">
<option value="1">Default</option>
<option valeu="2">Blah</option>
</select>
When this code runs the select options get cleared instead of changing !

Try once
<select id="checkin">
<option value="1">Default</option>
<option value="2">Blah</option>
</select>

I found a typo(valeu="2") in your html. Also, I don't think you need to trigger change() event just to change value.
Here you go:
function someClickEventFunction(){
$("#checkin").val("2");
}
someClickEventFunction()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="checkin">
<option value="1">Default</option>
<option value="2">Blah</option>
</select>
Hope this helps!
Thanks,
Ashok

how github topic feature implemented in javascript

i wonder how can it show a list of result after the input, and after click the list result, it display on the input text, and can use with mutiple topic.
Are there any js library could implement this easily?
can anybody show some code sample to implement such feature?

Try this: https://select2.github.io/examples.html#multiple
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>