Bir HTML SELECT'e programlı olarak nasıl açılır açılır (örneğin fareyle üzerine gelme nedeniyle) söyleyebilirsiniz?

Bir HTML'ye programlı olarak nasıl selectaçılır (örneğin, fareyle üzerine gelme nedeniyle) söyleyebilirsiniz ?

Bunu bir HTML seçme etiketiyle yapamazsınız, ancak JavaScript ve HTML ile yapabilirsiniz . Bunu yapan çeşitli mevcut kontroller vardır - örneğin, SO "ilginç / göz ardı edilen etiket" girişine eklenen "öneri" listesi veya Gmail'in e-posta adresleri araması.

Bu özelliği sağlayan birçok JavaScript + HTML denetimi vardır - fikirler için otomatik tamamlama denetimlerini arayın.

Otomatik Tamamlama kontrolü için bu bağlantıya bakın ... http://ajaxcontroltoolkit.codeplex.com/

Bu eskiden HTML + Javascript ile mümkündü, her yerde insanlar öyle olmadığını söylese de, daha sonra kullanımdan kaldırıldı ve şimdi çalışmıyor.

Ancak bu yalnızca Chrome'da çalıştı. İlgileniyorsanız daha fazlasını okuyun.

HTML5 için W3C Çalışma Taslağı, Bölüm 3.2.5.1.7'ye göre. Etkileşimli İçerik :

HTML'deki bazı öğelerin bir etkinleştirme davranışı vardır, bu da kullanıcının bunları etkinleştirebileceği anlamına gelir. Bu, aktivasyon mekanizmasına bağlı olarak bir dizi olayı tetikler [...] , örneğin klavye veya ses girişi kullanarak veya fare tıklamaları yoluyla .

Kullanıcı, tanımlanmış bir aktivasyon davranışına sahip bir öğeyi tıklamak dışında bir şekilde tetiklediğinde , etkileşim olayının varsayılan eylemi çalıştırmak olmalıdır. , öğe üzerinde sentetik tıklama etkinleştirme adımlarını .

<select>Etkileşimli bir İçerik olduğundan, e-postalarını programatik olarak göstermenin mümkün olduğuna inandım <option>. Birkaç saat oynadıktan sonra, bunu kullandığımı keşfettim.document.createEvent() ve .dispatchEvent()eserleri.

Demo zamanı dedi. İşte çalışan bir Fiddle.

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

Biri aynı şeyi yapmanın bir yolunu bulur ancak Chrome'da bulamazsa, lütfen bu keman üzerinde değişiklik yapmaktan çekinmeyin .

Xavier Ho'nun cevabı, şu anda orada bulunan çoğu tarayıcıda sorunun nasıl çözüleceğini kapsıyor. Ancak, olayları artık JavaScript ile 'göndermemek / değiştirmemek' iyi bir uygulamadır . (Sevmek,mousedown Bu durumda olduğu gibi)

53+ sürümünden itibaren, Google Chrome güvenilmeyen olaylar için varsayılan eylemi gerçekleştirmeyecektir . Komut dosyası tarafından oluşturulan veya değiştirilen ya da dispatchEventyöntemle gönderilen olaylar gibi . Bu değişiklik, Firefox ve IE ile uyum sağlamak için yapıldı ve bence zaten eylemi gerçekleştirmiyor.

Test amacıyla Fiddle , Xavier'in cevabının Chrome 53+ ile çalışmayacağını sağladı. (FF ve IE'yi test etmiyorum).

Referans için bağlantılar:

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

Ve initMouseEvent de kullanımdan kaldırıldı

Bu, elde edebileceğim en yakın şey, farenin üzerinde öğenin boyutunu değiştirebilir ve farenin dışında kalan boyutu geri yükleyebilir:

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

aynı sorunu yaşıyorum ve bunu çözmenin daha kolay yolu html ve css ile oldu.

select{
  opacity: 0;
  position: absolute;
}

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

Bunun artık Chrome'da mümkün olmadığını düşünüyorum.

Görünüşe göre Chrome'un 53 sürümü, Asim K.

Spesifikasyona göre http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Güvenilen Olaylar varsayılan eylemi tetiklememelidir (tıklama olayı dışında).

Ancak bunu web görünümünde etkinleştirdiler, ancak bunu test etmedim.

Bazı web görüntülemelerin içlerinde fastclick kullandığını ve kırılma riski nedeniyle, güvenilmez olsalar bile seçimlerde fare imlecine izin vereceğimizi bulduk.

Ve bu tartışmada , geliştiricilerin programatik olarak bir açılır menü açmasına izin verme fikri terk edilmiştir.

Hala arayan biri varsa:

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

Güncelleme:

Bu soruna mükemmel bir çözüm bulunmayana kadar, Ama bu senaryodan kaçınmayı deneyebilirsiniz. Bunu neden yapmak istiyorsun? Mobil cihazlar için seçkin bir eklenti yapmak için birkaç ay önce bir çözüm arıyordum

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

Sonunda, özel div'i (veya herhangi bir öğeyi) şeffaf bir seçme öğesiyle maskelemek, böylece kullanıcıyla doğrudan etkileşime girebilir.

İşte bulduğum en iyi yol. NOT Yalnızca Windows'ta IE ile çalışır ve web'inizin muhtemelen güvenli bir bölgede olması gerekir - çünkü kabuğa erişiyoruz. İşin püf noktası, ALT-Aşağı Ok'un bir seçme açılır menüsünü açmak için bir kısayol tuşu olmasıdır.

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

Yapmak istediğinizde bir şeyin imkansız olduğunu, hiçbir şeyin imkansız olmadığını düşünmeyi bırakın.

Bir adam tarafından oluşturulan bu JS genişletme işlevini kullanın.

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

Bu JS'yi ekleyin ve parametreyi geçen kimliğiniz olarak çağırın, örneğin:

ExpandSelect(MySelect)

Yanılıyor olabilirim, ancak bunun varsayılan seçim kutusuyla mümkün olduğuna inanmıyorum. JS ve CSS ile istenen sonucu elde eden bir şeyler yapabilirsiniz, ancak (bildiğim kadarıyla) vanilya SEÇİMİ yapamazsınız.

Bu soruda ve benzerlerinde bahsedilen bazı geçici çözümlerle "HTML seçimi" açılması mümkündür. Ancak bunu yapmanın daha temiz bir yolu, projenize "seç2" veya "seçilmiş" gibi bir seçme kitaplığı eklemektir. Örneğin, programlı olarak bir select2 açmak şu kadar kolay olabilir:

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

Bu tam olarak istediğiniz şey değil, ancak bu çözümü basitliği için seviyorum. Açılır listeyi başlatmak istediğim çoğu durumda, bunun nedeni, kullanıcının gerçekten bir seçim yaptığını doğruluyorum. Açılır menünün boyutunu değiştiriyorum ve ona odaklanıyorum, bu da atladıklarını güzel bir şekilde vurguluyor:

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