jQueryの選択ユーザーが動作しません

Question

ユーザーを選択すると、選択入力タイプを使用する予定です これらのユーザーのツイートのみが表示されます。

<select id="selectUser"> 
     <option value="all">All</option> 
     <option value="user1">user1</option> 
     <option value="user2">user2</option> 
     <option value="user3">user3</option> 
     <option value="user4">user4</option> 
     <option value="user5">user5</option> 
    </select> 

そして、私は仕事を処理する機能を作成しました：：

Tweets.displayUserTweets = function(id) { 
    $('#main-content').html(''); 
    var streamLength = streams.users[id].length; 
    var index = 0; 
    while (index < streamLength) { 
     var tweet = streams.users[id][index]; 
     var dayWrapper = moment(tweet.created_at).fromNow(); 
     $('#main-content').append('<div class="box-content"><img src="img/' + tweet.user + '.png" align="left" class="avatar-main"><h5 class="fullNameMain">' + tweet.user + '<span class="userNameMain"> @' + tweet.user + ' * ' + dayWrapper + '</span></h5><p class="tweetContent">' + tweet.message + '</p><ul><li><span class="comment"></span>48K</li><li><span class="retweet"></span> 50K</li><li><span class="heart"></span>100K</li><li><span class="msg"></span>22K</li></ul></div>'); 
     index++; 
    } 
}; 

をし、文書の準備ができて、ユーザーである時はいつでも私は、私はFFのHTMLを作成したのは何

これらのユーザーの1人を選択すると、メインコンテンツボックスが空になり、ユーザーのつぶやきのみが表示されます。

$('#selectUser').on('click', 'button', function() { 
     if (this.value === 'all') { 
      Tweets.latestTweets(); 
     } else { 
      Tweets.displayUserTweets(this.value); 
     } 
    }); 

今のところ動作しません。どのようなアイデアを調整する必要がありますか？

Answer 1

イベントハンドラclickからchangeに変更すると動作します。

クリックハンドラは設定されても起動しますが、クリックするとメニューが開き、変更が行われる前に発生するため、変更が反映されません。ユーザーがリストを変更した後にchangeが発生します。

$('#selectUser').on('change', function() { 
    if (this.value === 'all') { 
     Tweets.latestTweets(); 
    } else { 
     Tweets.displayUserTweets(this.value); 
    } 
});