Bagaimana Anda bisa secara terprogram memberi tahu HTML SELECT untuk drop-down (misalnya, karena gerakan mouse)?

Bagaimana Anda bisa secara terprogram memberi tahu HTML selectuntuk turun (misalnya, karena gerakan mouse)?

Anda tidak dapat melakukannya dengan tag pemilihan HTML, tetapi Anda dapat melakukannya dengan JavaScript dan HTML. Ada berbagai kontrol yang melakukan ini - misalnya, daftar "saran" yang dilampirkan ke entri "tag menarik / diabaikan" SO, atau pencarian Gmail untuk alamat email.

Ada banyak kontrol JavaScript + HTML yang menyediakan kemampuan ini - cari kontrol pelengkapan otomatis untuk ide.

Lihat tautan ini untuk kontrol Pelengkapan Otomatis ... http://ajaxcontroltoolkit.codeplex.com/

Ini dulunya benar-benar dimungkinkan dengan HTML + Javascript, meskipun di tempat lain orang mengatakan tidak, tetapi itu sudah usang nanti dan tidak berfungsi sekarang.

Namun, ini hanya berfungsi di Chrome. Baca lebih lanjut jika Anda tertarik.

Menurut Draf Kerja W3C untuk HTML5, Bagian 3.2.5.1.7. Konten Interaktif :

Elemen tertentu dalam HTML memiliki perilaku aktivasi, yang berarti pengguna dapat mengaktifkannya. Ini memicu urutan kejadian yang bergantung pada mekanisme aktivasi [...] misalnya menggunakan keyboard atau input suara, atau melalui klik mouse .

Saat pengguna memicu elemen dengan perilaku aktivasi yang ditentukan selain dengan mengkliknya, tindakan default dari peristiwa interaksi tersebut harus menjalankan langkah aktivasi klik sintetis pada elemen tersebut.

<select>menjadi Konten Interaktif, saya percaya bahwa mungkin untuk menampilkan secara terprogram <option>. Setelah beberapa jam bermain-main, saya menemukan bahwa menggunakan document.createEvent()dan .dispatchEvent()bekerja.

Konon, waktu demo. Ini Biola yang berfungsi.

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);
};

Jika ada yang menemukan cara untuk melakukan hal yang sama tetapi tidak di Chrome, silakan memodifikasi biola ini . </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Jawaban Xavier Ho mencakup cara mengatasi masalah tersebut di sebagian besar browser yang ada saat ini. Tapi, praktik yang baik adalah 'tidak mengirim / mengubah' acara dengan JavaScript lagi . (Seperti, mousedowndalam kasus ini)

Dari versi 53+, Google Chrome tidak akan melakukan tindakan default untuk acara tidak tepercaya . Seperti acara yang dibuat atau diubah oleh skrip, atau dikirim melalui dispatchEventmetode. Perubahan ini untuk menyelaraskan dengan Firefox dan IE yang menurut saya sudah tidak melakukan aksinya.

Untuk tujuan pengujian, Fiddle memberikan jawaban Xavier tidak akan berfungsi di chrome 53+. (Saya tidak mengujinya FF dan IE).

Tautan untuk referensi:

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

Dan initMouseEvent juga tidak digunakan lagi

Ini yang paling dekat yang bisa saya dapatkan, ubah ukuran elemen onmouseover, dan pulihkan ukuran 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>

saya memiliki masalah yang sama dan cara yang lebih mudah saya temukan untuk solusi ini dengan html dan css.

select{
  opacity: 0;
  position: absolute;
}

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

Saya pikir ini tidak mungkin lagi di Chrome.

Tampaknya chrome versi 53 menonaktifkan fungsi ini seperti yang dinyatakan oleh Asim K T.

Menurut spesifikasi http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Peristiwa Tepercaya tidak boleh mengaktifkan tindakan default (kecuali peristiwa klik).

Namun mereka telah mengaktifkannya di tampilan web, tetapi saya belum menguji ini.

Kami telah menemukan bahwa beberapa tampilan web menggunakan fastclick di dalamnya dan karena risiko kerusakan, kami akan mengizinkan mousedown pada pilihan meskipun tidak tepercaya.

Dan dalam diskusi ini , ide untuk membiarkan developer membuka dropdown secara terprogram ditinggalkan.

Jika ada yang masih mencari ini:

<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; });
});

Memperbarui:

Satu sampai tidak ada solusi tepat untuk masalah ini, Tetapi Anda dapat mencoba menghindari skenario ini. Mengapa Anda ingin melakukan ini. Saya bertanya-tanya solusi beberapa bulan yang lalu untuk membuat plugin pilihan untuk perangkat seluler

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

Akhirnya berakhir dengan menutupi div khusus (atau elemen lainnya) dengan elemen pilih transparan, sehingga dapat langsung berinteraksi dengan pengguna.

Inilah cara terbaik yang saya temukan. CATATAN Ini hanya bekerja dengan IE di Windows dan web Anda mungkin perlu berada di zona aman - karena kami mengakses shell. Triknya adalah ALT-Panah Bawah adalah tombol pintas untuk membuka drop down pilih.

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

Berhentilah berpikir bahwa satu hal tidak mungkin, tidak ada yang mustahil untuk dilakukan, ketika Anda ingin melakukannya.

Gunakan fungsi perluasan JS yang dibuat oleh seorang pria.

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

Sertakan JS ini dan panggil saja itu meneruskan param sebagai id pilihan Anda, seperti itu:

ExpandSelect(MySelect)

Saya mungkin salah, tapi saya tidak percaya itu mungkin dengan kotak pilih default. Anda bisa melakukan sesuatu dengan JS & CSS yang mencapai hasil yang diinginkan, tetapi tidak (sepengetahuan saya) vanilla SELECT.

Membuka "pemilihan HTML" dimungkinkan melalui beberapa solusi yang disebutkan dalam pertanyaan ini dan yang serupa. Namun cara yang lebih bersih untuk melakukan ini adalah dengan menambahkan perpustakaan pilihan ke proyek Anda seperti "select2" atau "dipilih". Misalnya, membuka select2 secara terprogram semudah:

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

Ini bukan yang Anda minta, tetapi saya suka solusi ini karena kesederhanaannya. Dalam kebanyakan kasus di mana saya ingin memulai dropdown, itu karena saya memvalidasi bahwa pengguna benar-benar telah membuat pilihan. Saya mengubah ukuran dropdown dan memfokuskannya, yang dengan baik menyoroti apa yang telah mereka lewati:

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