選択ボックスのテキストフィールドにあるものを追加するjQueryの関数があります。ボタンをクリックすると、関数が呼び出されます。
addToList = function(textField, selectList)
{
var val = $('#'+textField).val();
var select = $('#'+selectList);
//If element does not exist already...
if (select.find('option[value="' + val + '"]').length === 0 && val!="")
{
//Add new element to the list
$('<option>', {
value: val,
text: val
}).appendTo(select);
//Clear text field
$('#'+textField).val("");
//Scroll down multi select and select automatically the added option
//TODO: Scrolls only to selected element
var lastOption = select.find("option[value="+val+"]");
lastOption.attr("selected", true);
}
else
{
if (val!="")
{
alert("\""+val+"\" is already in the list.");
}
}
};
私が望むのは、リストに要素を追加するたびに、リストが一番下までスクロールし (リストの最後の要素が最後の行に表示されることを意味します)、追加された要素が自動的に選択されることです。
SOで選択した要素までスクロールするコードを見つけましたが、選択されているものに関係なく、単にリストの最後までスクロールするコードが見つかりませんでした。最初の要素を選択すると、このコードはスクロールしないので、これが必要です!