フォーカスのセレクトの値を変更する

Question

最初に選択するオプションはSearch by dateです。私は、このオプションがすべての日付のデータを返すので、selectがフォーカスを取得すると、この値が（All datesに）変更されるようにしたいと思います。 私はこれまでのところ持っています。アラートに

$("#select-date").focus(function() { 
    window.alert('Focus!'); 
    $('#select-date option[value="Search by Date"]').attr("value", "All Dates"); 
}); 

細かいI have found my selectをトリガーテストとして、第二には、何もしません。私は間違って何をしていますか？

Answer 1

あなたがやっているすべては、本質的に"Search by Date"からのjQueryのセレクタから返さoption要素の値を変更しているようしかしattrを使用すると、あなたのために選択した項目を変更するつもりはないが、ここでトラックにはかなりいます"All Dates"。

focus()イベントリスナー内では、$("#select-dates").val()を使用してドロップダウンボックスの現在の値を取得できます。次に、この値をグループ内のの最初のoption子要素の値と照合します。

現在の値が最初の要素の値と一致する場合は、$("#select-dates").val('all')を使用して、コントロールの選択値をallに割り当てます。あなたは、私が用意しましたjsFiddle、hereを見ることができます

デモ

。

HTML

<select id="select-date"> 
    <option>- Select Date -</option> 
    <option value="all">All Dates</option> 
    <option value="2016-05">May, 2016</option> 
    <option value="2016-04">April, 2016</option> 
    <option value="2016-03">March, 2016</option> 
    <option value="2016-02">February, 2016</option> 
    <option value="2016-01">January, 2016</option> 
    <option value="2015-12">etc, etc...</option> 
</select> 

はJavaScript

$("select#select-date").on('focus', function() { 
    if ($(this).val() == null || $(this).val() == $(this).find("option:first-child").val()) { 
    $(this).val("all"); 
    } 
}); 

これは、あなたが発生するこの種の機能が欲しいのいずれかのドロップダウンボックスで動作します。