We Keep Coding

Can't select multi-select items. Jquery

I have implemented the following multiselect into my project.
http://loudev.com/
And I have done everything as I should (as far as I know) the layout is looking as it should, the css and javascript is running but when i hover over an option, it isn't clickable, it treats it as a line of text, not a clickable object.
Here is the code for the select input and where it is initialised in javascript.
<select multiple="multiple" class="form-control" id="my-select" name="my-select[]">
<option value="elem_1">elem 1</option>
<option value="elem_2">elem 2</option>
<option value="elem_3">elem 3</option>
<option value="elem_4">elem 4</option>
<option value="elem_100">elem 100</option>
</select>
$('#my-select').multiSelect();

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!

php, html, change a select to selective after writeing first word and so on

this is the select.
<select name='select_name'>
<option value='1'>one</option>
<option value='2'>tow</option>
<option value='3'>three</option>
<option value='4'>fore</option>
//here i have more then 300 select which i will fetch from database
</select>
i want to change it input so when i write the first later it fetch me the match items and so on if the secound later it match as i write. if is possible please write me hint so i could save my time.
for example if i write (t) it will show me
tow
three
regards

You're looking for a combo box. If you don't want to write it from scratch, you could use a plugin instead.
In this example is Select2 Plugin:
Example:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<select name='select_name' style="width:300px">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
<option value='5'>five</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name="select_name"]').select2();
});
</script>
Demo

Bootstrap Selectpicker problems

I'm trying to use this selectpicker for form selects and options, but can't get it to work.
I've added the following scripts and css as specified:
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
html for the 1st greyed out select in the search bar:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
Any ideas appreciated.

Please be sure that you included all the required files or You may have to rearrange the code like :
<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>
<script type="text/javascript">
$('.selectpicker').selectpicker({
});
</script>
You need to include the js first then call the the plugin. Check this fiddle, its working for me : http://jsfiddle.net/tejashsoni111/RUAS4/

.selectpicker() is a function defined under bootstrap-select lib and not in core bootstrap library,hence you need to include that library as well
//silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js
//silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css
HTML:
<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()">
<option value="All">All</option>
<option value="Businesses">Businesses</option>
<option value="Events">Events</option>
<option value="News">News</option>
<option value="Lifestyle">Lifestyle</option>
</select>
JQUERY CODE:
$('.selectpicker').selectpicker();
Here is a Live Demo of select picker function :
http://jsfiddle.net/dreamweiver/2a9xp/13/
Happy Coding :)

In case anyone using Rails is experiencing a similar problem - the issue was arising from the existence of the precompiled assets for the AWS deployment that were lingering in my local environment.
Deleting YourRailsApp/public/assets solved the issue for me.

Select2 multiple creates duplicate values

My Select2 box is working oddly with multiple selection turned on.
When I submit my form it sends duplicate post data in a mirror-like fashion.
For example, I select
'United States','United Kingdom','Ireland'
It posts (Reported by firebug and shown in html result)
'United States','United Kingdom','Ireland','United Kingdom','United States'
My HTML for countries(slimmed down)...
<select multiple name="country" id="country" class="select2" data-placeholder="Select Country/Countries" style="width:220px;" required>
<option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Albania">Albania</option><option value="Zimbabwe">Zimbabwe</option>
</select>
And my JS only calls
$('.select2').select2();
I have no idea why this might be happening. I'm using other JS libraries like Bootstrap,jQueryValidate,and Zebra DatePicker, but I don't think they would interfere.

You may have called $('.select2').select2(); function twice. I faced the same issue and the reason was that I had called the function twice for same dropdown.

Try this
$("#country").select2();