คุณจะบอกให้ HTML SELECT เลื่อนลงโดยใช้โปรแกรมได้อย่างไร (ตัวอย่างเช่นเนื่องจากการวางเมาส์)

คุณจะบอกให้ HTML selectแบบเลื่อนลงโดยใช้โปรแกรมได้อย่างไร (ตัวอย่างเช่นเนื่องจากเมาส์โอเวอร์)

คุณไม่สามารถทำได้ด้วยแท็กเลือก HTML แต่สามารถทำได้ด้วย JavaScript และ HTML มีการควบคุมที่มีอยู่มากมายที่ทำเช่นนี้ตัวอย่างเช่นรายการ "แนะนำ" ที่แนบมากับรายการ "แท็กที่น่าสนใจ / ละเว้น" ของ SO หรือการค้นหาที่อยู่อีเมลของ Gmail

มีตัวควบคุม JavaScript + HTML จำนวนมากที่ให้ความสามารถนี้ - มองหาการควบคุมการเติมข้อความอัตโนมัติสำหรับแนวคิด

ดูลิงค์นี้สำหรับการควบคุมการเติมข้อความอัตโนมัติ ... http://ajaxcontroltoolkit.codeplex.com/

สิ่งนี้เคยเป็นไปได้จริงกับ HTML + Javascript แม้จะมีคนบอกว่าไม่ใช่ แต่จะเลิกใช้งานในภายหลังและใช้งานไม่ได้ในขณะนี้

อย่างไรก็ตามสิ่งนี้ใช้ได้เฉพาะใน Chrome อ่านเพิ่มเติมหากคุณสนใจ

ตามW3C Working Draft สำหรับ HTML5 ส่วน 3.2.5.1.7 เนื้อหาแบบโต้ตอบ :

องค์ประกอบบางอย่างใน HTML มีพฤติกรรมการเปิดใช้งานซึ่งหมายความว่าผู้ใช้สามารถเปิดใช้งานได้ ทริกเกอร์นี้ลำดับเหตุการณ์ขึ้นอยู่กับกลไกการเปิดใช้งานได้ [ ... ] ตัวอย่างเช่นการใช้แป้นพิมพ์หรือป้อนข้อมูลด้วยเสียงหรือผ่านการคลิกเมาส์

เมื่อผู้ใช้ทริกเกอร์องค์ประกอบที่มีพฤติกรรมการเปิดใช้งานที่กำหนดไว้ในลักษณะอื่นนอกเหนือจากการคลิกการดำเนินการเริ่มต้นของเหตุการณ์การโต้ตอบต้องเรียกใช้ขั้นตอนการเปิดใช้งานการคลิกสังเคราะห์บนองค์ประกอบ

<select>ในฐานะที่เป็น Interactive Content ฉันเชื่อว่าเป็นไปได้ที่จะแสดง<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 โปรดปรับเปลี่ยนซอนี้ได้ตามต้องการ

คำตอบของ Xavier Ho ครอบคลุมถึงวิธีแก้ปัญหาในเบราว์เซอร์ส่วนใหญ่ที่มีอยู่ในปัจจุบัน แต่มันเป็นวิธีปฏิบัติที่ดี 'ไม่ได้ที่จะจัดส่ง / แก้ไข' เหตุการณ์ JavaScript อีกต่อไป (เช่นmousedownในกรณีนี้)

จากรุ่น 53+, Google Chrome จะไม่ดำเนินการดำเนินการเริ่มต้นสำหรับเหตุการณ์ยกเลิกการที่เชื่อถือได้ เช่นเหตุการณ์ที่สร้างหรือแก้ไขโดยสคริปต์หรือส่งผ่านdispatchEventวิธีการ การเปลี่ยนแปลงนี้มีไว้เพื่อให้สอดคล้องกับ Firefox และ IE ซึ่งฉันคิดว่ายังไม่ได้ดำเนินการ

สำหรับวัตถุประสงค์ในการทดสอบFiddleให้คำตอบของ Xavier จะไม่ทำงานใน chrome 53+ (ฉันไม่ได้ทดสอบ FF และ IE)

ลิงค์สำหรับอ้างอิง:

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

และ initMouseEvent ก็เลิกใช้เช่นกัน

นี่คือสิ่งที่ใกล้เคียงที่สุดที่ฉันจะได้รับเปลี่ยนขนาดขององค์ประกอบ onmouseover และเรียกคืนขนาด 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

ดูเหมือนว่า Chrome เวอร์ชัน 53 จะปิดการใช้งานฟังก์ชันนี้ตามที่ระบุโดย Asim K T.

ตามสเป็ก http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

เหตุการณ์ที่เชื่อถือไม่ควรเริ่มการทำงานเริ่มต้น (ยกเว้นเหตุการณ์การคลิก)

อย่างไรก็ตามพวกเขาได้เปิดใช้งานใน webview แต่ฉันไม่ได้ทดสอบสิ่งนี้

เราพบว่าบางเว็บวิวกำลังใช้ fastclick อยู่ข้างในและเนื่องจากมีความเสี่ยงที่จะเกิดการแตกหักเราจึงยอมให้มีการตัดต่อในรายการที่เลือกแม้ว่าจะไม่น่าเชื่อถือก็ตาม

และในการสนทนานี้ความคิดที่จะให้นักพัฒนาเปิดดรอปดาวน์แบบเป็นโปรแกรมถูกละทิ้ง

หากมีใครยังคงมองหาสิ่งนี้:

<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-Down Arrow เป็นปุ่มทางลัดเพื่อเปิดเมนูแบบเลื่อนลงเพื่อเลือก

<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 ที่ได้ผลลัพธ์ที่ต้องการ แต่ไม่ใช่ (ตามความรู้ของฉัน) vanilla SELECT

การเปิด "HTML select" ทำได้โดยวิธีแก้ปัญหาบางอย่างที่กล่าวถึงในคำถามนี้และวิธีแก้ปัญหาที่คล้ายกัน อย่างไรก็ตามวิธีที่สะอาดกว่านี้คือการเพิ่มไลบรารีที่เลือกลงในโครงการของคุณเช่น "select2" หรือ "selected" ตัวอย่างเช่นการเปิด select2 โดยใช้โปรแกรมจะทำได้ง่ายเหมือนกับ:

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

นี่ไม่ใช่สิ่งที่คุณขอ แต่ฉันชอบโซลูชันนี้สำหรับความเรียบง่าย ในกรณีส่วนใหญ่ที่ฉันต้องการเริ่มรายการแบบเลื่อนลงนั่นเป็นเพราะฉันกำลังตรวจสอบว่าผู้ใช้ได้ทำการเลือกแล้ว ฉันเปลี่ยนขนาดของดรอปดาวน์และโฟกัสซึ่งจะเน้นสิ่งที่พวกเขาข้ามไปอย่างดี:

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