Select2 templateResult数据没有可供引用的元素

Z时代
2024-01-10
分类：问答

我正尝试使用freeform文本选项将文本附加到select2中添加的任何新值中。附加文本我想设置选择元素（在我的情况下通过mvc帮手）。Select2 templateResult数据没有可供引用的元素

问题是进入templateResult的数据没有元素。在我搜索的任何地方，data.element用于进入DOM，但它不适合我，我不知道为什么。如果我查看createTag函数，参数也没有元素。容器也仅仅是一个“李”，显然还没有在这里，没有孩子或父母。

这里是代码：

$('.custom-dropdown').each(function() { 
    $(this).css('width', '100%'); 
    if ($(this).hasClass('freeform')) { 
    $(this).select2({ 
     tags: true, 
     createTag: function(params) { 
      return { 
      id: params.term, 
      text: params.term, 
      newOption: true 
      } 
     }, 
     templateResult: function(data, container) { 
      var $result = $("<span></span>"); 
      $result.text(data.text); 
      if (data.newOption) { 
      //data.element is undefined here!!! 
      } 
     } 
     return $result; 
     }, 
     placeholder: "Press ENTER for list of options", 
     allowClear: true, 
     selectOnClose: true 
    }); 
} else { 
    $(this).select2({ 
    placeholder: "Press ENTER for list of options", 
    allowClear: true, 
    selectOnClose: true, 
    }); 
} 
$(this).on('select2:select', function(e) { 
    if (e.params.data.text != '') { 
    var id = $(this).attr('id'); 
    var select2 = $("span[aria-labelledby=select2-" + id + "-container]"); 
    select2.removeAttr('style'); 
    } 
}); $(this).on('select2:close', function() { 
    $(this).focus(); 
}); 
});

选择的一个例子是：

选择class="custom-dropdown freeform"data-appendme="blorg"

回答：

templateResult被用于创建DOM。创建它之前，您无法访问该dom。

也许你需要的东西是这样的：

（附加 “数据appendme” 的价值，该选项的文本createTag）

<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>test</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <!DOCTYPE html>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>  
</head>  
<body>  
    <link rel="stylesheet" href="style.css">  
    <script src="index.js"></script>  
    <select class="custom-dropdown freeform" data-appendme="blorg"></select>  
    <script>  
     $('.custom-dropdown').each(function() {  
      var $select = $(this);  
      $select.css('width', '100%');  
      if ($select.hasClass('freeform')) {  
       $select.select2({  
        tags: true,  
        createTag: function (params) {  
         return {  
          id: params.term,  
          text: params.term + $select.data('appendme'),  
          newOption: true  
         }  
        },  
        templateResult: function (data, container) {  
         var $result = $("<span></span>");  
         $result.text(data.text);  
         return $result;  
        },  
        placeholder: "Press ENTER for list of options",  
        allowClear: true,  
        selectOnClose: true  
       });  
      } else {  
       $(this).select2({  
        placeholder: "Press ENTER for list of options",  
        allowClear: true,  
        selectOnClose: true,  
       });  
      }  
      $(this).on('select2:select', function (e) {  
       if (e.params.data.text != '') {  
        var id = $(this).attr('id');  
        var select2 = $("span[aria-labelledby=select2-" + id + "-container]");  
        select2.removeAttr('style');  
       }  
      });  
      $(this).on('select2:close', function() {  
       $(this).focus();  
      });  
     });  
    </script>  
</body>  
</html>