Як ви можете програмно сказати HTML SELECT, щоб він вийшов (наприклад, за допомогою миші)?

Як ви можете програмно сказати HTML, selectщоб він вийшов (наприклад, за допомогою миші)?

Ви не можете зробити це за допомогою тегу вибору HTML, але ви можете це зробити за допомогою JavaScript та HTML. Існує безліч існуючих елементів керування - наприклад, список "запропонувати", доданий до запису SO "цікавий / ігнорований тег", або пошук Gmail для адрес електронної пошти.

Існує багато елементів керування JavaScript + HTML, які забезпечують цю можливість - шукайте елементи автоматичного заповнення ідей.

Дивіться це посилання для контролю автозаповнення ... http://ajaxcontroltoolkit.codeplex.com/

Це було реально можливо за допомогою HTML + Javascript, незважаючи на те, що люди говорять, що це не так, але згодом воно було застаріле і не працює зараз.

Однак це працювало лише в Chrome. Читайте більше, якщо вам цікаво.

Відповідно до робочого проекту W3C для HTML5, розділ 3.2.5.1.7. Інтерактивний контент :

Деякі елементи HTML мають поведінку активації, що означає, що користувач може їх активувати. Це запускає послідовність подій, залежних від механізму активації [...], наприклад, за допомогою клавіатури або голосового введення, або за допомогою клацань миші .

Коли користувач запускає елемент із визначеною поведінкою активації іншим способом, ніж натискання на нього, дією події взаємодії за замовчуванням має бути виконання кроків активації синтетичного клацання на елементі.

<select>будучи інтерактивним контентом, я вважав, що можна програмно відображати його <option>s. Після кількох годин розігрування я виявив, що використовує document.createEvent()і .dispatchEvent()працює.

Це, демо-час. Ось робочий 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);
};

Якщо хтось знайде спосіб зробити те ж саме, але не в Chrome, будь ласка, змініть цю загадку . Сігналы абмеркавання

Відповідь Ксав'є Хо розповідає, як вирішити проблему в більшості браузерів, які зараз там. Але, добре, що "більше не відправляти / змінювати" події через JavaScript . (Як, mousedownу цьому випадку)

З версії 53+ Google Chrome не буде виконувати дії за замовчуванням для неперевірених подій . Наприклад, події, створені або модифіковані за сценарієм, або відправлені за допомогою dispatchEventметоду. Ця зміна призначена для вирівнювання з Firefox та IE, які, на мою думку, вже не виконують дії.

З метою тестування Фіддл за умови, що відповідь Ксав'є не буде працювати в хромі 53+. (Я не тестую це на FF та IE).

Посилання для довідок:

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

І InitMouseEvent також застарілий

Це найближче, що я міг отримати, змінити розмір елемента на миші та відновити розмір 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>

У мене є ця сама проблема і простіший спосіб я знайшов вирішення цього питання з html та css.

select{
  opacity: 0;
  position: absolute;
}

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

Я думаю, що це більше не можливо в Chrome.

Здається, версія 53 хрому вимикає цю функціональність, як заявив Асім К Т.

Відповідно до специфікації http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Довірені події не повинні запускати дію за замовчуванням (крім події клацання).

Однак вони включили це у веб-перегляді, але я цього не перевіряв.

Ми виявили, що деякі веб-перегляди використовують швидкий клік всередині них, і через ризик поломки ми дозволимо дозволити вибору на вибір, навіть якщо вони не є довіреними.

І в цій дискусії відміняється ідея дозволити розробникам відкривати спадне програмне меню.

Якщо хтось все ще шукає цього:

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

Оновлення:

До тих пір, поки немає ідеального рішення цієї проблеми, але ви можете спробувати уникнути цього сценарію. Чому ти хочеш це робити? Мені було цікаво вирішити кілька місяців тому, щоб зробити плагін вибору для мобільних пристроїв

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

Нарешті закінчилося маскування користувацького div (або будь-якого іншого елемента) прозорим елементом вибору, щоб він міг безпосередньо взаємодіяти з користувачем.

Ось найкращий спосіб, який я знайшов. ПРИМІТКА. Це працює лише з IE в Windows, і ваш веб, мабуть, повинен бути в захищеній зоні - тому що ми отримуємо доступ до оболонки. Хитрість полягає в тому, що ALT-стрілка вниз - це клавіша швидкого доступу, щоб відкрити вибране спадне меню.

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

Перестаньте думати, що одна річ неможлива, нічого неможливого зробити, коли ви хочете зробити.

Використовуйте цю функцію JS розширення, створену хлопцем.

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

Включіть цей JS і просто зателефонуйте, що передає параметр, як ідентифікатор вибору, наприклад:

ExpandSelect(MySelect)

Я можу помилятися, але я не вірю, що це можливо за допомогою вибору за замовчуванням. Ви можете зробити щось із JS & CSS, що досягає бажаного результату, але не (наскільки мені відомо) ваніль SELECT.

Відкрити "Вибір HTML" можливо через деякі способи вирішення, згадані в цьому питанні, та подібні. Однак більш чіткий спосіб зробити це - додати до свого проекту вибрану бібліотеку, наприклад "select2" або "selected". Наприклад, відкрити програму select2 програмно було б так просто, як:

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

Це не саме те, про що ви просили, але мені подобається це рішення за його простоту. У більшості випадків, коли я хочу ініціювати спадне меню, це тому, що я перевіряю, що користувач фактично зробив вибір. Я змінюю розмір випадаючого меню і фокусую його, що добре підкреслює те, що вони пропустили:

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