JS-プラグインの使用を選択
Js Selectize Plugin Use
Selectizeは、jQueryに基づく入力と選択の組み合わせです。
その使用シナリオは通常、タグ、連絡先リスト、国セレクターなどにあります。
GitHub：
例：
selectize .exampleSearch { width: 300px height: 500px margin: 0 auto display: block margin-top: 300px } 112Front End Back-End Designer Ruby JavaScript Python Developer WordPress PHP HTML CSS JQuery Ember Angular React iOS Android Java Git Sass Engineer Get value
Get value $(document).ready(function() { $('#example').selectize({ / / Set the maximum number of choices, the default null, multiple choice // maxItems:1, plugins: [ 'remove_button' ], / / Dynamically create option separator delimiter: ',', create: function(input) { return { value: input, text: input } }, / / Set the maximum number of display pulldown maxOptions:5, }) var selectize = $('#example')[0].selectize $('#btn').click(function() { / / Get the selected value $('#val').html(selectize.getValue().join(',')) }) / / Dynamically add options $('#example2').selectize({ //value field valueField: 'id', //text field labelField: 'name', / / Search field searchField: ['id', 'name'], plugins: [ 'remove_button' ], render:{ //Custom option option:function(item,escape) { return ' 【' + item.id + '】' + item.name + ' ' }, / / Custom selection option format item:function(item) { return ' 【' + item.id + '】' + item.name + ' ' } }, onItemAdd: function(value, $item) { Console.log ('option selected event') }, onItemRemove: function(value) { Console.log ('options unchecked events') } }) var selectize2 = $('#example2')[0].selectize $('#btn2').click(function() { / / Get the selected value $('#val2').html(selectize2.getValue().join(',')) }) var options = [] options.push({id:1, name:'java'}) options.push({id:2, name:'html'}) options.push({id:3, name:'js'}) // clear options selectize2.clear() selectize2.clearOptions() $.each(options, function(index, value) { / / Add options selectize2.addOption(value) }) }) 効果：
