جافاسكريبت - كيف يمكنك برمجياً إخبار عنصر HTML SELECT بأنه يجب أن ينفتح (على سبيل المثال، بسبب تحريك الماوس فوقه)؟

كيف يمكنك برمجياً إخبار عنصر HTML select بالانخفاض (على سبيل المثال، بسبب التحويم بالماوس)؟

الإجابة رقم 1

كان هذا ممكنًا بالفعل مع HTML+Javascript، على الرغم من أن الجميع يقولون في كل مكان أنه غير ممكن، لكنه تم إهماله لاحقًا ولا يعمل الآن.

ومع ذلك، هذا نجح فقط في كروم. اقرأ المزيد إذا كنت مهتمًا.

وفقًا لمسودة عمل W3C للـ HTML5، القسم 3.2.5.1.7. المحتوى التفاعلي:

بعض العناصر في HTML لها سلوك التفعيل، مما يعني أن المستخدم يمكنه تفعيلها. وهذا يؤدي إلى سلسلة من الأحداث تعتمد على آلية التفعيل [...] على سبيل المثال استخدام لوحة المفاتيح أو إدخال الصوت، أو من خلال نقرات الفأرة.

عندما يقوم المستخدم بتشغيل عنصر له سلوك تفعيل محدد بطريقة غير النقر عليه، يجب أن يكون الإجراء الافتراضي لحدث التفاعل هو تنفيذ خطوات تفعيل النقر الاصطناعي على العنصر.

نظرًا لأن <select> هو محتوى تفاعلي، فقد اعتقدت أنه من الممكن عرض <option> الخاصة به برمجيًا. بعد بضع ساعات من التجارب، اكتشفت أن استخدام document.createEvent() و .dispatchEvent() يعمل.

مع ذلك، حان وقت العرض التجريبي. إليك نموذج Fiddle يعمل.

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

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

إذا وجد أي شخص طريقة للقيام بنفس الشيء ولكن ليس في كروم، فلا تتردد في تعديل هذا الفيدل.

الإجابة رقم 2

إجابة Xavier Ho تغطي كيفية حل المشكلة في معظم المتصفحات الحالية. لكن، من الممارسات الجيدة عدم إرسال/تعديل الأحداث بواسطة جافاسكريبت بعد الآن. (مثل، mousedown في هذه الحالة)

من الإصدار 53 وما بعده، لن يقوم Google Chrome بأداء الإجراء الافتراضي للأحداث غير الموثوقة. مثل الأحداث التي تم إنشاؤها أو تعديلها بواسطة السكربت، أو التي تم إرسالها عبر طريقة dispatchEvent. هذا التغيير لمواءمة Firefox و IE التي أعتقد أنها لا تقوم بالإجراء بالفعل.

لأغراض الاختبار، لن يعمل جواب Xavier الذي قدمه Fiddle في كروم 53+. (لم أختبره في فايرفوكس وإنترنت إكسبلورر).

روابط للرجوع إليها:

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

وأيضًا initMouseEvent أصبحت مهجورة

الإجابة رقم 3

لدي نفس المشكلة والطريقة الأسهل التي وجدتها لحلها كانت باستخدام HTML و CSS.

أولاً، اجعل عنصر <select> شفافاً (opacity: 0;). ثم، ضع زرّك فوق <select>. النقر على الزر سيتم التقاطه بواسطة مكون <select>.

select{
  opacity: 0;
  position: absolute;
}
select:hover~button {
  background: orange;
}
 div * {
 width: 100px;
}

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

الإجابة رقم 4

هذا أقرب ما استطعت الوصول إليه، غيّر حجم العنصر عند التحويم بالماوس، وأعد الحجم عند إبعاد الماوس:

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

الإجابة رقم 5

لا يمكنك القيام بذلك باستخدام وسم HTML select، ولكن يمكنك القيام به باستخدام JavaScript و HTML. هناك مجموعة متنوعة من الضوابط الموجودة التي تقوم بذلك - على سبيل المثال، قائمة "الاقتراح" المرفقة بمدخل علامة "المثيرة/المهملة" على SO، أو البحث في Gmail عن عناوين البريد الإلكتروني.

هناك العديد من عناصر التحكم في JavaScript و HTML التي توفر هذه الإمكانية - ابحث عن عناصر التحكم بالإكمال التلقائي للحصول على أفكار.

تحقق من هذا الرابط للتحكم في الإكمال التلقائي... http://ajaxcontroltoolkit.codeplex.com/

الإجابة رقم 6

يمكنك استخدام الطريقة الجديدة showPicker():

if ("showPicker" in HTMLSelectElement.prototype) {
  document.querySelector('button').addEventListener('click', function() { 
  document.querySelector('select').showPicker();
});
}