我无法使select2（）正常工作。我希望下拉菜单具有（a）占位符，说“从货币中选择”，以及（b）可搜索。

我有以下codeigniter代码。mh_xrate_currency是该货币的3个字母值，例如USD，AUD，CAD，EUR等。mh_xrate_name是诸如美元，澳元，加拿大元，欧元等的名称。

    <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>

上面的代码产生如下页面：

 <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>

我还加载了select2并具有以下代码；

 $(document).ready(function () {
     $(".xrate_from_dropdown").select2({
         placeholder: "Select From Currency...",
         allowClear: true,   
     });
 });

但是由于某种奇怪的原因，页面最初显示为

初始显示

请注意上图中下拉菜单下方的x。然后选择后，显示如下：

[