Ngăn chặn menu chọn mở

Question

Có thể là một câu hỏi ngớ ngẩn, nhưng làm cách nào để ngăn một phần tử được chọn trong biểu mẫu hiển thị trình đơn thả xuống khi được nhấp vào? Tôi thử như sau:

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

và

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

Nhưng không phải làm việc.

Tôi đang làm gì sai?

CHỈNH SỬA: Lý do tôi cần biết là cho phần tử chọn tăng cường jquery cần phải giảm cấp một cách duyên dáng. Ý tưởng là lựa chọn, khi được nhấp, mở một hộp thoại giao diện người dùng jquery với một danh sách được tạo thành độc đáo mà người dùng thực hiện lựa chọn của họ từ đó (việc nhấp vào mục danh sách sẽ làm cho giá trị của người dùng được chọn cập nhật). Nếu JS bị tắt thì lựa chọn sẽ hoạt động như bình thường.

Vấn đề là cũng như mở hộp thoại, trình đơn thả xuống cũng xuất hiện, đó không phải là điều tôi muốn. Tôi không thể tắt điều khiển vì giá trị của nó cần được gửi cùng với phần còn lại của biểu mẫu.

Answer 1

Tôi tin rằng giải pháp tốt nhất là nên thay thế các yếu tố lựa chọn với một cái gì đó khác để click vào (một nút hoặc liên kết).

BTW, bạn có thể muốn xem xét thuộc tính CSS 3 appearence, về mặt lý thuyết cho phép bạn để phần tử thay thế đó trông giống như một trình đơn thả xuống. Hỗ trợ được tuy nhiên hiện nay rất hạn chế:

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

Answer 2

Sử dụng tàn tật

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

Answer 3

Ẩn tùy chọn lựa chọn trên tải trang (nếu bật Javascript). Họ sẽ không hiển thị khi hộp chọn được nhấp, nhưng văn bản của tùy chọn đầu tiên ("Chọn một tùy chọn", hoặc bất kỳ tùy chọn nào) sẽ vẫn xuất hiện trong trường chọn.

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

Cập nhật Giải pháp:

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

Answer 4

Từ kinh nghiệm của tôi, nếu tôi cần phải vô hiệu hóa một cái gì đó, cách dễ nhất để có một yếu tố vô hình vào nó (sử dụng tuyệt đối vị trí) . Khi bạn muốn cho phép lại hành vi mặc định, bạn chỉ cần ẩn phần tử tuyệt đối.

Answer 5

Tôi vừa giải quyết vấn đề chính xác này, bằng cách thao tác thuộc tính 'kích thước' của chọn. Không phải là rất thanh lịch, nhưng làm việc. Hy vọng một số giúp đỡ cho bạn.

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

này nên làm việc: -

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

Answer 7

Bạn có thể, các trick là để hủy bỏ sự kiện mousedown, không phải là nhấp chuột.Chuỗi sự kiện được thực hiện theo cách mà nhấp chuột và chuột không thể xảy ra nếu bị hủy bỏ quyền sở hữu:

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

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

Answer 8

Vấn đề là bạn đang sử dụng sự kiện sai.

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

JsFiddle