select2 js插件无法在html页面中正常工作

Question

我想为此选择下拉列表加载数据，我已经使用了select2 jQuery插件，但是当我在html页面中使用它时，尽管它在模式上可以正常工作，但它无法正常工作。

我的代码是：

HTML

<select class="form-control locationSelect select2-hidden-accessible" 
  id="locationid" name="locationid" style="width: 100%;">
                <?php if($asset['locationid'] != 0) { ?>
                    <option value="<?php echo $asset['locationid']; ?>">
                        <?php echo 
 getSingleValue("locations","name",$asset['locationid']) ; ?></option>
                 <?php } else { ?>
                    <option value="0"><?php _e('None'); ?></option>
                <?php } ?>
  </select>

AJAX

<script>
$('.locationSelect').select2({

        ajax: {
            url: "index.php",
            dataType: 'json',
            data: function (params) {
              return {
                q: params.term, // search term
                qa: 'locationSelect',
                filterid: clientid
              };
            },
            processResults: function (data,params) {
                return {
                    results: $.map(data, function(obj) {
                        return { id: obj.id, text: obj.text };
                    })
                };
            },
            //cache: true,
        },
        minimumInputLength: 0,
        placeholder: "<?php _e('Please Select'); ?>",
    });
</script>

我需要指导，还有其他方法可以在html页面中使用它