无法读取带有图像选项的null属性'select2'

Question

你好，我尝试在下拉菜单中添加图片，我使用select2 lib生成列表

select2版本：3.5.4（我无法更新）

更新我的代码 你好，谢谢你的帮助... @ SachaM78 我验证我的代码

    jQuery(document).ready(function() {

        fcfield_addrint.initAutoComplete("custom_field17_0", "field17");
        fcfield_addrint.initMap("custom_field17_0", "field17");

        // load image in select
        function format(state) {
        console.log(state);
        if (!state.id) return state.text; // optgroup custom_field17_0_custom_marker
        return (
          '<img class="fla" src="images/icons/' +
          state.id.toLowerCase() +
          '.png"/>' +
          state.text
        );
      }
      $("#custom_field17_0_custom_marker").select2({
        formatResult: format,
        formatSelection: format,
        escapeMarkup: function(m) {
          return m;
        }
      });

    });

和

<select id="custom_field17_0_custom_marker" name="custom[field17][0][custom_marker]" class="fc_gm_custom_marker" aria-invalid="false">
    <option value="">Select</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/2hand.png">2hand.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/360degrees.png">360degrees.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/_readme-license.txt">_readme-license.txt</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/abduction.png">abduction.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/aboriginal.png">aboriginal.png</option>
    <option value="http://localhost/flexi-dev/\images/icons-map/accesdenied.png">accesdenied.png</option>
</select>

返回此

  

index.php？option = com_flexicontent＆task = item.edit＆view = item＆id = 13：824   未捕获的TypeError：无法读取null的属性“ select2”        在HTMLDocument。 （index.php？option = com_flexicontent＆task = item.edit＆view = item＆id = 13：824）        在u（jquery.min.js？a84f5770d385cc79fd5efcfeaebe6f82：2）        在Object.fireWith [as resolveWith]（jquery.min.js？a84f5770d385cc79fd5efcfeaebe6f82：2）        在Function.ready（jquery.min.js？a84f5770d385cc79fd5efcfeaebe6f82：2）        在HTMLDocument._（jquery.min.js？a84f5770d385cc79fd5efcfeaebe6f82：2）

Answer 1

只看了一下您的代码，我发现了一些可能以某种方式导致您遇到错误的问题。

1. select2()需要在<select>元素上被调用，但是现在您在<div>元素上被调用。使用高级格式化，您可以将其应用于任何元素，但我目前认为您不需要它，并使用默认的SELECT元素。
2. 您当前隐藏的<select>缺少</select>元素，因此无效。
3. 您的format()函数使用了不正确的转义：在字符串周围使用双引号，但是在字符串内部转义了单引号。另外，您的字符串中似乎还有一个重音。

更改了 HTML代码：

<select id="custom_field51_0_custom_marker" name="custom[field51][0][custom_marker]" 
        class="use_select2_lib fc_gm_custom_marker" tabindex="-1" title="Custom icon">
    <option value="">Sélectionner</option>
    <option value="C:\wamp64\www\flexidev/images/icons/1.png">1.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/2.png">2.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/3.png">3.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/4.png">4.png</option>
    <option value="C:\wamp64\www\flexidev/images/icons/5.png">5.png</option>    
</select> <!-- added missing end of SELECT

更改了 JS代码：

jQuery(document).ready(function() {
  // load image in select
  function format(state) {
    console.log(state);
    if (!state.id) return state.text; // optgroup
    return (
      '<img class="fla" src="images/icons/' +
      state.id.toLowerCase() +
      '.png"/>' +
      state.text
    );
  }
  $("#custom_field51_0_custom_marker").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) {
      return m;
    }
  });
});

当前结果：

我创建了一个Codepen，其中显示的<select>在下拉列表中显示了丢失的图像符号，因为参考图像无法在线使用。