Làm cách nào để bạn có thể lập trình yêu cầu một HTML SELECT thả xuống (ví dụ: do di chuột qua)?

Làm cách nào bạn có thể lập trình yêu cầu HTML selectthả xuống (ví dụ: do di chuột qua)?

Bạn không thể làm điều này với thẻ chọn HTML, nhưng bạn có thể làm điều đó với JavaScript và HTML. Có nhiều điều khiển hiện tại thực hiện điều này - ví dụ: danh sách "đề xuất" được đính kèm với mục nhập SO "thẻ thú vị / thẻ bị bỏ qua" hoặc tra cứu địa chỉ email của Gmail.

Có nhiều điều khiển JavaScript + HTML cung cấp khả năng này - hãy tìm kiếm các điều khiển tự động hoàn thành để có ý tưởng.

Xem liên kết này để biết điều khiển Tự động điền ... http://ajaxcontroltoolkit.codeplex.com/

Điều này từng thực sự có thể thực hiện được với HTML + Javascript, mặc dù ở mọi nơi mọi người nói rằng không, nhưng sau này nó không còn được dùng nữa và không hoạt động nữa.

Tuy nhiên, điều này chỉ hoạt động trong Chrome. Đọc thêm nếu bạn quan tâm.

Theo Dự thảo làm việc của W3C cho HTML5, Phần 3.2.5.1.7. Nội dung tương tác :

Một số phần tử nhất định trong HTML có hành vi kích hoạt, có nghĩa là người dùng có thể kích hoạt chúng. Điều này kích hoạt một chuỗi các sự kiện phụ thuộc vào cơ chế kích hoạt [...], chẳng hạn như sử dụng bàn phím hoặc nhập liệu bằng giọng nói hoặc thông qua các cú nhấp chuột .

Khi người dùng kích hoạt phần tử có hành vi kích hoạt xác định theo cách khác với cách nhấp vào phần tử đó, hành động mặc định của sự kiện tương tác phải là chạy các bước kích hoạt nhấp chuột tổng hợp trên phần tử.

<select>là Nội dung tương tác, tôi tin rằng có thể hiển thị theo chương trình của nó <option>. Sau một vài giờ chơi xung quanh, tôi phát hiện ra rằng cách sử dụng document.createEvent()và .dispatchEvent()hoạt động.

Điều đó nói rằng, thời gian demo. Đây là một Fiddle đang hoạt động.

HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

Nếu ai đó tìm thấy cách làm tương tự nhưng không có trong Chrome, vui lòng sửa đổi cách làm này . Các bác sĩ cho biết:

Câu trả lời của Xavier Ho là đề cập đến cách giải quyết vấn đề trong hầu hết các trình duyệt hiện có. Tuy nhiên, thực hành tốt là 'không gửi / sửa đổi' các sự kiện bằng JavaScript nữa . (Giống như, mousedowntrong trường hợp này)

Từ phiên bản 53+, Google Chrome sẽ không thực hiện tác vụ mặc định cho các sự kiện không đáng tin cậy . Chẳng hạn như các sự kiện được tạo hoặc sửa đổi bằng tập lệnh, hoặc được gửi qua dispatchEventphương thức. Thay đổi này là để căn chỉnh với Firefox và IE mà tôi nghĩ rằng đã không thực hiện hành động.

Vì mục đích thử nghiệm, Fiddle đã cung cấp câu trả lời của Xavier sẽ không hoạt động trong chrome 53+. (Tôi không kiểm tra nó FF và IE).

Liên kết để tham khảo:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

Và initMouseEvent cũng không được dùng nữa

Đây là cách gần nhất mà tôi có thể nhận được, thay đổi kích thước của phần tử onmouseover và khôi phục kích thước onmouseout:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

tôi có cùng một vấn đề này và cách dễ dàng hơn mà tôi tìm thấy để giải quyết vấn đề này là với html và css.

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

Tôi nghĩ rằng điều này không còn khả thi trong Chrome.

Có vẻ như phiên bản 53 của chrome vô hiệu hóa chức năng này như Asim K T. đã nêu.

Theo thông số http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Sự kiện đáng tin cậy không được kích hoạt hành động mặc định (ngoại trừ sự kiện nhấp chuột).

Tuy nhiên, họ đã kích hoạt nó trong webview, nhưng tôi chưa thử nghiệm điều này.

Chúng tôi nhận thấy rằng một số chế độ xem web đang sử dụng fastclick bên trong chúng và do nguy cơ bị hỏng, chúng tôi sẽ cho phép bỏ qua các lựa chọn ngay cả khi chúng không đáng tin cậy.

Và trong cuộc thảo luận này , ý tưởng để các nhà phát triển mở một trình đơn thả xuống theo chương trình đã bị bỏ rơi.

Nếu bất kỳ ai vẫn đang tìm kiếm điều này:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

Javascript:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

Cập nhật:

Một cho đến khi không có giải pháp hoàn hảo cho vấn đề này, Nhưng bạn có thể cố gắng tránh trường hợp này. Tại sao bạn muốn làm việc này. Tôi đã tự hỏi một giải pháp cách đây vài tháng để tạo một plugin chọn lọc cho thiết bị di động

https://github.com/HemantNegi/jquery.sumoselect

Cuối cùng, kết thúc bằng việc che dấu div tùy chỉnh (hoặc bất kỳ phần tử nào khác) bằng một phần tử chọn trong suốt, để nó có thể tương tác trực tiếp với người dùng.

Đây là cách tốt nhất mà tôi tìm thấy. LƯU Ý Nó chỉ hoạt động với IE trên Windows và web của bạn có thể cần phải ở trong vùng an toàn - vì chúng tôi truy cập shell. Bí quyết là ALT-Mũi tên Xuống là một phím tắt để mở một danh sách thả xuống được chọn.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

Ngừng nghĩ rằng một điều là không thể, không có gì là không thể làm được, khi bạn muốn làm.

Sử dụng chức năng JS mở rộng này được tạo bởi một anh chàng.

http://code.google.com/p/expandselect/

Bao gồm JS này và chỉ cần gọi nó chuyển param làm id đã chọn của bạn, như sau:

ExpandSelect(MySelect)

Tôi có thể sai, nhưng tôi không tin rằng điều đó có thể xảy ra với hộp chọn mặc định. Bạn có thể làm điều gì đó với JS & CSS để đạt được kết quả mong muốn, nhưng không phải (theo hiểu biết của tôi) với vanilla SELECT.

Có thể mở "HTML select" thông qua một số cách giải quyết được đề cập trong câu hỏi này và những cách giải quyết tương tự. Tuy nhiên, một cách tốt hơn để làm điều này là thêm một thư viện chọn lọc vào dự án của bạn như "select2" hoặc "selected". Ví dụ: mở select2 theo chương trình sẽ dễ dàng như sau:

$('#target-select').select2('open');

Đây không phải là chính xác những gì bạn yêu cầu, nhưng tôi thích giải pháp này vì sự đơn giản của nó. Trong hầu hết các trường hợp khi tôi muốn bắt đầu một trình đơn thả xuống, đó là bởi vì tôi đang xác thực rằng người dùng đã thực sự lựa chọn. Tôi thay đổi kích thước của menu thả xuống và tập trung vào nó, điều này làm nổi bật độc đáo những gì họ đã bỏ qua:

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();