Javascript 如何通过编程让HTML选择下拉（例如，由于鼠标悬停）？

如何通过编程让HTML

select

下拉（例如，由于鼠标悬停）？

我可能错了，但我认为默认的选择框不可能做到这一点。你可以用JS&CSS做一些事情来达到期望的结果，但（据我所知）香草选择是不可能的。

我可能错了，但我不相信默认选择框可以做到这一点。您可以使用JS和CSS来实现所需的结果，但（据我所知）不是香草选择。

您不能使用HTML选择标记来实现这一点，但可以使用JavaScript和HTML来实现。有各种各样的现有控件可以做到这一点——例如，附加在所谓“有趣/被忽略的标签”条目上的“建议”列表，或者Gmail的电子邮件地址查找

有许多JavaScript+HTML控件提供了这一功能——请寻找自动完成控件以了解想法

---

有关自动完成控件，请参见此链接…

您不能使用HTML选择标记来完成此操作，但可以使用JavaScript和HTML来完成此操作。有各种各样的现有控件可以做到这一点——例如，附加在所谓“有趣/被忽略的标签”条目上的“建议”列表，或者Gmail的电子邮件地址查找

有许多JavaScript+HTML控件提供了这一功能——请寻找自动完成控件以了解想法

---

有关自动完成控件，请参见此链接…

这是我能得到的最接近的控件，更改mouseover上元素的大小，并恢复mouseout上的大小：

1.
2.
3.
4.
5.

这是我能得到的最接近的值，更改mouseover元素的大小，并恢复mouseout元素的大小：

1.
2.
3.
4.
5.

这是我找到的最好的方法。请注意，它只适用于Windows上的IE，您的web可能需要位于安全区域中，因为我们访问shell。诀窍在于，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>

选项
基础知识
DEF
GHI
JKL
函数doClick（）{
选项select.focus（）；
var WshShell=newActiveXObject（“WScript.Shell”）；
SendKeys（“%{DOWN}”）；
}

这是我找到的最好的方法。请注意，它只适用于Windows上的IE，您的web可能需要位于安全区域中，因为我们访问shell。诀窍在于，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>

选项
基础知识
DEF
GHI
JKL
函数doClick（）{
选项select.focus（）；
var WshShell=newActiveXObject（“WScript.Shell”）；
SendKeys（“%{DOWN}”）；
}

这并不是您想要的，但我喜欢这个简单的解决方案。在大多数情况下，我希望启动下拉列表，这是因为我正在验证用户是否确实进行了选择。我更改下拉列表的大小并将其聚焦，这很好地突出了他们跳过的内容：

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

---

这并不完全是您所要求的，但我喜欢这个简单的解决方案。在大多数情况下，我希望启动下拉列表，这是因为我正在验证用户是否确实进行了选择。我更改下拉列表的大小并将其聚焦，这很好地突出了他们跳过的内容：

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

这在HTML+Javascript中曾经是可行的，尽管其他地方的人都说不可行，但后来它被弃用，现在不起作用了

然而，这只适用于Chrome。如果您感兴趣，请阅读更多内容。

---

根据：

HTML中的某些元素具有激活行为，这意味着用户可以激活它们。这会触发一系列事件，具体取决于激活机制[…]，例如使用键盘或语音输入，或通过鼠标单击

当用户以非单击的方式触发具有定义的激活行为的元素时，交互事件的默认操作必须是在该元素上运行合成单击激活步骤

作为一种交互式内容，我相信可以通过编程方式显示其

s。玩了几个小时后，我发现使用

document.createEvent（）

和

.dispatchEvent（）

是有效的

也就是说，演示时间到了

---

HTML:

红色
绿色
蓝色


显示下拉项​

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

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

//元素在鼠标向下而不是单击时显示其选项。
showDropdown=函数（元素）{
var事件；
event=document.createEvent（'MouseEvents'）；
initMouseEvent（'mousedown'，true，true，window）；
元素。dispatchEvent（事件）；
};
//这不是魔法。
window.runThis=函数（）{
var dropdown=document.getElementById（'dropdown'）；
下拉列表（下拉列表）；
};

如果有人找到了一种方法来做同样的事情，但不是在Chrome中。 ​

这在HTML+Javascript中实际上是可行的，尽管其他地方的人都说不可行，但后来它被弃用，现在不起作用了

然而，这只适用于Chrome。如果您感兴趣，请阅读更多内容。

---

根据：

HTML中的某些元素具有激活行为，这意味着用户可以激活它们。这会触发一系列事件，具体取决于激活机制[…]，例如使用键盘或语音输入，或通过鼠标单击

当用户以非单击的方式触发具有定义的激活行为的元素时，交互事件的默认操作必须是在该元素上运行合成单击激活步骤

作为一种互动内容，我相信编程是可能的

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

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

var SelectionWrapper = function(element, maxSize, selectCb) {

  var preventDefault = function(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  var isOpen = false;

  var open = function() {
    if (!isOpen) {
      element.size = maxSize;
      // Remove prevent default so that user will be able to select the option
      // Check why we prevent it in the first place below
      element.removeEventListener('mousedown', preventDefault);
            // We focus so that we can close on blur.
      element.focus();
      isOpen = true;
    }
  };

  var close = function() {
    if (isOpen) {
      element.size = 1;
      // Prevent default so that the default select box open behaviour is muted.
      element.addEventListener('mousedown', preventDefault);
      isOpen = false;
    }
  };

    // For the reason above
  element.addEventListener('mousedown', preventDefault);

    // So that clicking elsewhere closes the box
  element.addEventListener('blur', close);

    // Toggle when click
  element.addEventListener('click', function(e) {
    if (isOpen) {
      close();
      // Call ballback if present
      if(selectCb) {
                selectCb(element.value);
            }
    } else {
      open();
    }
  });


  return {
    open: open,
      close: close
  };
};

// Usage
var selectionWrapper = SelectionWrapper(document.getElementById("select_element"), 7, function(value) {
  var para = document.createElement("DIV");
  para.textContent = "Selected option: " + value;
  document.getElementById("result").appendChild(para);
});

document.getElementById("trigger").addEventListener('click', function() {
  selectionWrapper.open();
});