Изменение значения выбора на фокусе

Question

У меня есть первый вариант: Search by date. Я хочу сделать так, чтобы при выборе фокуса это значение менялось (до 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

Вы очень много на пути здесь, однако использование attr не собирается изменить выбранный пункт для вас, как и все, что вы делаете, по существу, изменяя значение возвращаемой option элемента из селектора JQuery из "Search by Date" в "All Dates".

Внутри прослушивателя событий focus() вы можете использовать $("#select-dates").val(), чтобы получить текущее значение раскрывающегося списка. Затем проверьте это значение на значение option дочерний элемент в группе.

Если текущее значение соответствует значению первого элемента, используйте $("#select-dates").val('all'), чтобы присвоить выбранное значение элемента управления all.

Demo

Вы можете увидеть 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"); 
    } 
}); 

Это будет работать на любом выпадающем списке, где вы хотели бы такого рода функциональность, чтобы это произошло.