この jQuery プラグインを変更しようとしています。テキスト ボックスから選択した後、テキスト ボックスに表示される要素の合計を制限したいと考えています。現在、選択した項目を、リンクをクリックしたときにのみ表示される div に移動しています。
これは私が達成したものです:
countCities++; if(countCities > 2){
gonningToAppend = $('ul.chzn-choices li:visible').first().attr('id');
cityName = $('ul.chzn-choices li:visible span').first().html();
//alert(cityName);
$('#invisibleCityContainer').append('<div class="'+gonningToAppend+' search-choice-todel'+'"><div style="display:inline-block;">'+cityName+'</div></div>');
$('#invisibleCityContainer').append('<div id="'+gonningToAppend+'_close" class="x_button_for_city_list" ></div>');
//$('ul.chzn-choices li:visible').first().appendTo("#invisibleCityContainer");
$('ul.chzn-choices li:visible').first().hide();
$('#pluseCityCountInProfilePageEdit').html('and '+(countCities-2)+' more.');
}
$( "#pluseCityCountInProfilePageEdit" ).click(function() {
$("#invisibleCityContainer").animate( { "opacity": "show"} , 1000 );
event.stopPropagation();
}
);
HTML
<div id="invisibleCityContainer" style="display:none;" ></div>
私が達成したいこと:
- 2 つ以上の項目を選択すると、最新の 2 つの項目がテキスト ボックスに表示されます
- 他のすべての選択されたアイテムは非表示の div に移動されます。選択されているすべてのアイテムを表示をクリックすると、div が表示され、アイテムの選択を解除できます。
- アイテムの選択が解除されると、ドロップダウンに再入力する必要があります。