2017-12-27 924 views
2

我正尝试使用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"

回答

0

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>

如果你不这样做想要在选项中使用“blorg”,但希望在选择标记中使用它,则可以用templateResult中的空字符串替换它。

+1

谢谢,这只是一个小小的修改。 data.newOption的templateResult检查是不必要的,因为文本已经准备好设置,并且由于它们没有被设置为newOption,所以它消除了所有现有的下拉项目。所以只要删除,如果块和返回$结果是完美的。 – Alex

+0

@blackmiaool,为什么当我输入第一个字符时,立即创建(并选择)一个新标签? – beaver

相关问题