javascript 탭으로 선택 메뉴가 열리지 않도록하기




pdf 탭으로 열기 (8)

이것은 작동합니다 :

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

아마도 어리석은 질문 일 수 있습니다.하지만 폼의 select 요소가 클릭 될 때 드롭 다운 메뉴를 표시하지 못하게하려면 어떻게해야합니까? 나는 다음을 시도했다 :

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

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

그러나 어느 쪽도 효과가 없었다.

내가 뭘 잘못하고 있죠?

편집 : jquery 우아하게 저하시킬 필요가 선택 요소를 향상시키기위한 이유를 알고 있어야합니다. 아이디어는 선택 항목을 클릭하면 jquery UI 대화 상자가 열리 며, 사용자가 선택한 항목을 클릭하면 (목록 항목을 클릭하면 선택 항목 값이 업데이트됩니다) jquery UI 대화 상자가 열립니다. JS가 비활성화 된 경우 select는 정상적으로 작동해야합니다.

문제는 대화창 열기뿐 아니라 드롭 다운도 나타납니다. 이는 내가 원하지 않는 것입니다. 컨트롤의 값을 나머지 폼과 함께 제출해야하므로 컨트롤을 비활성화 할 수 없습니다.


문제는 잘못된 이벤트를 사용하고 있다는 것입니다.

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

JsFiddle



페이지로드시 선택 옵션을 숨 깁니다 (자바 스크립트가 활성화 된 경우). 선택 상자를 클릭하면 표시되지 않지만 첫 번째 옵션 텍스트 ( "옵션 선택"등)는 선택 필드에 계속 표시됩니다.

$(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');
        });
    });
});

사용 중지됨

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

내 경험에 비추어 볼 때, 무언가를 무력하게해야한다면, 보이지 않는 다른 요소를 사용하는 가장 쉬운 방법입니다 (절대 위치 지정 사용). 기본 동작을 다시 허용하려면 절대 요소를 숨 깁니다.


방금 select의 'size'속성을 조작하여이 정확한 문제를 해결했습니다. 매우 우아하지는 않지만 일했습니다. 희망이 당신에게 도움이됩니다.

<!-- 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>

CSS를 기반으로하는 간단한 해결책은 다음과 같은 작은 조각입니다.

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

선택을 선택하면 옵션을 사용할 수 없습니다. 이 동작은 입력의 "읽기 전용"특성의 동작을 모방합니다.





events