I am unable to get select2() working as desired. I want a dropdown has (a) a placeholder to say "Select From Currency" and (b) to be searchable.
I have the following codeigniter code. mh_xrate_currency is the 3 letter value for the currency like USD, AUD, CAD, EUR, etc. mh_xrate_name is the name like United States Dollars, Australian Dollars, Canadian Dollars, Euro, etc.
<div class="row">
<div class="form-group col-lg-6 col-md-6">
<?php
$options = array();
$options[0] = null;
foreach ($currencies as $currency) {
$options[$currency['mh_xrate_currency']] = $currency['mh_xrate_currency'].', '.$currency['mh_xrate_name'];
}
$attributes = 'class="form-control input-md xrate_from_dropdown" ';
echo form_dropdown('xrate_from', $options, set_value('xrate_from'), $attributes);
?>
</div>
</div>
The above code produces a page like following;
<div class="row">
<div class="form-group col-lg-6 col-md-6">
<label for="mh_xrate_currency">Xrate From a</label>
<select name="xrate_from" class="form-control input-md xrate_from_dropdown" >
<option value="0"></option>
<option value="BRL">BRL, Australian Dollar</option>
<option value="AUD">AUD, Australian Dollar</option>
<option value="GBP">GBP, British Pound</option>
<<snip>>
</select>
</div>
</div>
I also have the select2 loaded and have the following code;
$(document).ready(function () {
$(".xrate_from_dropdown").select2({
placeholder: "Select From Currency...",
allowClear: true,
});
});
but for some strange reason, the page initially displays as;
Notice the x in the above image below the dropdown. Then after selected, it displays as follows;
[
I forgot to load the select2 css files!! arrg. When I load the css files, it works well.