Select2 templateResult數據沒有可供引用的元素

我正嘗試使用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"

來源

2017-12-27 Alex

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中的空字符串替換它。

來源

2017-12-30 08:37:41 blackmiaool

謝謝，這只是一個小小的修改。 data.newOption的templateResult檢查是不必要的，因爲文本已經準備好設置，並且由於它們沒有被設置爲newOption，所以它消除了所有現有的下拉項目。所以只要刪除，如果塊和返回$結果是完美的。 – Alex

@blackmiaool，爲什麼當我輸入第一個字符時，立即創建（並選擇）一個新標籤？ – beaver

Select2 templateResult數據沒有可供引用的元素

回答

相關問題