остановить Chrome, чтобы отобразить раскрывающийся список при нажатии кнопки выбора

Question

Я хочу нажать <select>, но остановите его, чтобы отобразить его выпадающий список

$('select').click(function(){
    if ($(this).find('option').size() > 20) {
        // some code to do my job
        return false;
    }
});

Код return false может остановить отображение раскрывающегося списка в Firefox (фактически, раскрывающийся список сначала отображается и скрывается через некоторое время), но не работает в Chrome.

Я также пытался отключить <select>, вызвать blur() на нем или click() на другом элементе, но выпадающий список все еще там, если пользователь не щелкнет где-то еще.

Возможно ли это? ... и спасибо!

---

Длинная история здесь (если вас интересует, почему я хочу это сделать):

Как вы знаете, иногда будет <select> со слишком многими <option> в нем, и когда вы щелкнете по нему, появится длинный выпадающий список список. Найти то, что вам нужно, в длинном выпадающем списке - ужасная работа ... Но, к сожалению, на моем сайте много всего.

Так что я думаю, что самый простой способ - это написать какой-нибудь javascript для изменения что, когда параметр больше 20, показать диалог с фильтром и новые <select>, которые только отфильтровали <option>, чтобы найти легко.

И моя проблема в том, что выпадающий список все еще отображается, сделайте моих пользователей растерян ... Они не знают, где действовать. «диалог или Выбор источника ".

Answer 1

Проблема в том, что действие по умолчанию для элемента select происходит с событием mousedown, а не с click (или mouseup), поэтому вам необходимо привязать обработчик события к mousedown вместо:

$("select").mousedown(function(e) {
    if ($(this).find('option').length > 20) {
        e.preventDefault(); //return false will also work
    }
});

Вот рабочий пример . Обратите внимание, что я использовал метод preventDefault объекта события, просто потому, что, как мне кажется, это проясняет, что на самом деле происходит. Однако return false тоже будет работать.

Answer 2

Я хотел отключить все элементы управления формой (с классом 'form_control') в таблице (id "details_table"), включая select, и указать пользователям кнопку "edit", которая открывает модальное окно.Небольшая настройка предыдущих ответов работала как в Firefox, так и в Chrome для Linux.Еще не тестировался в других браузерах.

$('#details_table').on('mousedown', '.form-control', function(e) {
    alert("Please click on the Edit button to modify details.");
    e.preventDefault();
    this.blur();
});