Select2() and Codeigniter

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;

initial-display

Notice the x in the above image below the dropdown. Then after selected, it displays as follows;

[