Select2 templateResultデータには参照する要素がありません

テキストを追加する場合は、select2freeformテキストオプションを使用して、新しい値にテキストを追加しようとしています。私がselect要素（私の場合、mvcヘルパーの方法で）に設定したいテキストが追加されました。Select2 templateResultデータには参照する要素がありません

問題は、templateResultに入ってくるデータに要素がないことです。私が検索したところでは、data.elementはDOMに入るために使われますが、それは私のためではありません。 createTag関数を見ると、paramsにも要素がありません。また、コンテナは、明らかにまだdomにはなく、子供や親ではない "li"です。ここ

コードである：

$('.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にアクセスすることはできません。そうしないと

は（createTagにオプションのテキストに "データappendme" の値を追加）

<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"を使用したいがselectタグで使用したい場合は、空の文字列で置き換えることができます。templateResult

出典

2017-12-30 08:37:41 blackmiaool

ありがとう、それは小さな修正を加えたトリックでした。 data.newOptionのtemplateResultチェックは、テキストがすでに設定可能な状態になっているので不要で、newOptionに設定されていないため、既存のドロップダウン項目はすべて削除されます。だからブロックして$ resultを返すだけで完璧です。 – Alex

@blackmiaool、最初の文字を入力すると、新しいタグがすぐに作成（選択）されるのはなぜですか？ – beaver

Select2 templateResultデータには参照する要素がありません

答えて

関連する問題