「選択したjQueryプラグイン」を含む選択ボックス内のGoogleスプレッドシートデータ

Question

選択したボックスに「選択したjQueryプラグイン」を追加しようとしています。 Googleスプレッドシートからのデータです 以下のコードを私の関数の下に追加してリストを追加しようとしました。しかし、これは動作しません。ここで

Option = "<li class="active-result">" + this.gsx$list.$t + "</li>"; 
     $('ul.chosen-results').append(Option); 

は私demo

function createLIST(){ 
 

 
// url to spreadsheet 
 
var url = "https://spreadsheets.google.com/feeds/list/1a00YuGgCNuzYfw7C4qxvpdlbRRiDHV45gPWwQ7E6X0E/o11yyjo/public/values?alt=json"; 
 

 
//var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/o11yyjo/public/values?alt=json"; 
 
    
 
$.getJSON(url, function(data) { 
 
    
 
    var entry = data.feed.entry; 
 
//function(){$('ul.chzn-results').empty();}, 
 
    $(entry).each(function(){ 
 
    // add each option 
 
    
 
    //Option = "<li class="active-result">" + this.gsx$list.$t + "</li>"; 
 
      //$('ul.chosen-results').append(Option); 
 
    Option = "<option>" + this.gsx$list.$t + "</option>"; 
 
      $('#products-list').append(Option); 
 
      
 
    }); 
 
    
 
    
 
}); 
 
    
 
} 
 
$(document).ready(function(e){ 
 

 
    // now add the GoogleSpread sheet list 
 
    createLIST() 
 
    //$('#products-list').chosen(); 
 
    
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script> 
 
<script src="http://code.jquery.com/jquery.min.js"></script> 
 
<datalist id='products'> 
 
    
 
</datalist> 
 

 
<select id='products-list'> 
 
</select>

Answer 1

あるオプションはJSON応答から追加された後にのみ、選択したプラグインを初期化します。

function createLIST() { 
 

 
    var url = "https://spreadsheets.google.com/feeds/list/1a00YuGgCNuzYfw7C4qxvpdlbRRiDHV45gPWwQ7E6X0E/o11yyjo/public/values?alt=json"; 
 

 
    $.getJSON(url, function(data) { 
 
    var entry = data.feed.entry; 
 
    $(entry).each(function() { 
 
     Option = "<option>" + this.gsx$list.$t + "</option>"; 
 
     $('#products-list').append(Option); 
 
    }); 
 

 
    // initialize chosen after options are added 
 
    $('#products-list').chosen(); 
 

 
    }); 
 
} 
 
$(document).ready(function(e) { 
 
    createLIST(); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" /> 
 
<script src="http://code.jquery.com/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script> 
 
<datalist id='products'> 
 

 
</datalist> 
 

 
<select id='products-list'> 
 
</select>