Предотвращение открытия меню выбора

Question

Возможно, глупый вопрос, но как я могу предотвратить отображение элемента select в форме при его нажатии на раскрывающемся меню? Я попробовал следующее:

$('select').click (function (e) {
    console.log (e);
    return false;
});

и

$('select').click (function (e) {
    e.preventDefault ();
    console.log (e);
});

Но ни один не работал.

Что я делаю не так?

РЕДАКТИРОВАТЬ : Мне нужно знать причину для расширенного элемента выбора jquery, который должен изящно ухудшаться. Идея заключается в том, что при нажатии выборка открывает диалоговое окно jquery UI с хорошо составленным списком, из которого пользователь делает свой выбор (щелчок по элементу списка приводит к обновлению значения выбора). Если JS отключен, то выбор должен просто работать как обычно.

Проблема в том, что наряду с открытием диалогового окна также появляется выпадающий список, а это не то, чего я хочу. Я не могу просто отключить элемент управления, так как его значение необходимо отправить вместе с остальной частью формы.

Answer 1

Это должно работать: -

$('#select').on('mousedown', function(e) {
   e.preventDefault();
   this.blur();
   window.focus();
});

Answer 2

Проблема в том, что вы используете неправильное событие.

<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
  <option>Some Option</option>
</select>

JsFiddle

Answer 3

Из моего опыта, если мне нужно что-то отключить, самый простой способ иметь еще один невидимый элемент (использовать абсолютное позиционирование). Когда вы хотите снова разрешить поведение по умолчанию, вы просто скрываете абсолютный элемент.

Answer 4

Я полагаю, что лучшим решением было бы заменить элемент select чем-то, на что можно нажать (кнопка или ссылка).

Кстати, вы можете захотеть взглянуть на свойство CSS 3 appearance, которое теоретически позволяет сделать этот заменяющий элемент похожим на выпадающий список Поддержка в настоящее время очень ограничена:

• http://css -infos.net / property / -webkit-Appearance
• https://developer.mozilla.org/en/CSS/-moz-appearance

Answer 5

Скрыть параметры выбора при загрузке страницы (если включен Javascript).Они не будут отображаться при щелчке поля выбора, но текст первого параметра («Выбрать параметр» или любой другой) все равно будет отображаться в поле выбора.

$(document).ready(function() {
    $('#idOfSelect option').css('display', 'none');
});

Обновленное решение:

$(document).ready(function() {
    $('#idOfSelect').focusin(function() {
        $(this).css('display', 'none');
        $('body').click(function(event) {
            $(this).unbind(event);
            $('#idOfSelect').css('display', 'block');
        });
    });
});

Answer 6

Я только что решил эту проблему, манипулируя атрибутом 'size' в select. Не очень элегантно, но сработало. Надеюсь, это поможет вам.

<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>

<!-- The JS function -->
<script>
    function tackleDropdown(){
        document.getElementById('select').setAttribute('size', 0);

        // your code for displaying the jQuery UI dialog (is it colorbox???)

        // re-enabling the drop down
        document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
    }
</script>

Answer 7

Использование отключено

$(this).attr("disabled","disabled");

Answer 8

Простое решение на основе CSS - это небольшой фрагмент:

select:read-only * {
    display: none;
}

Это сделает опции недоступными при выборе выбора.Это действие имитирует поведение «только для чтения» атрибута ввода.

Answer 9

Вы можете, трюк в том, чтобы отменить событие mousedown, а не щелчок.Цепочка событий сделана таким образом, что щелчок и наведение мышки не могут произойти, если mousedown отменен:

function cancelDropDown(ev) {
  ev.preventDefault();
}

document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);