blocks|key|1488133|text|这是我能得到的最接近的结果，更改元素onmouseover的大小，并恢复onmouseout的大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488134|​|1488135|<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>|code-block|syntax|javascript|1488136|1488137|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This is the closest I could get, change the size of the element onmouseover, and restore the size onmouseout:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1488419|text|我也有同样的问题，我发现解决这个问题的更简单的方法是使用HTML和CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488420|首先，让你的<select>透明(opacity:+0;)。然后，将您的按钮放在<select>上。在按钮上的单击将被<select>组件捕获。|offset|length|style|CODE|1488421|​|1488422|select{
++opacity:+0;
++position:+absolute;
}|code-block|syntax|javascript|1488423|<select>
++<option>option+1</option>
++<option>option+2</option>
++<option>option+3</option>
</select>
<button>click</button>|1488424|1488425|entityMap^0|0|6|8|H|B|14|8|1N|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|S|$]]

<p>I have this same problem and the easier way I found to solve this was with HTML and CSS.</p>
<p>First, make you <code>&lt;select&gt;</code> transparent (<code>opacity: 0;</code>). Then, place your button over the <code>&lt;select&gt;</code>. The click over the button will be caught by the <code>&lt;select&gt;</code> component.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>select{
  opacity: 0;
  position: absolute;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
  &lt;option&gt;option 1&lt;/option&gt;
  &lt;option&gt;option 2&lt;/option&gt;
  &lt;option&gt;option 3&lt;/option&gt;
&lt;/select&gt;
&lt;button&gt;click&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1488187|text|这是我找到的最好的方法。注意:它只适用于Windows上的IE，并且您的网站可能需要在安全区域中-因为我们访问外壳。诀窍是ALT-Down+Arrow是打开选择下拉菜单的快捷键。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488188|<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("%25{DOWN}");
+++}
</script>|code-block|syntax|javascript|1488189|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's the best way I found. NOTE It only works with IE on Windows and your web would probably need to be in a secure zone - because we access the shell. The trick is that ALT-Down Arrow is a shortcut key to open a select drop down.</p>

<pre><code>&lt;button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()"&gt;OPTIONS&lt;/button&gt;
&lt;select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9"&gt;
    &lt;option&gt;ABC&lt;/option&gt;
    &lt;option&gt;DEF&lt;/option&gt;
    &lt;option&gt;GHI&lt;/option&gt;
    &lt;option&gt;JKL&lt;/option&gt;
&lt;/select&gt;
&lt;script type="text/javascript"&gt;
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
&lt;/script&gt;
</code></pre>


blocks|key|1488373|text|当你想做的时候，不要再认为一件事是不可能的，没有什么是不可能做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488374|使用这个由一个人创建的扩展JS函数。|1488375|http://code.google.com/p/expandselect/|offset|length|1488376|包括此JS，并调用传递参数作为select+id，如下所示：|1488377|ExpandSelect(MySelect)|code-block|syntax|javascript|1488378|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|E]]]]

<p>Stop thinking that one thing is impossible, nothing is impossible to do, when you want to do.</p>

<p>Use this expand JS function created by a guy.</p>

<p><a href="http://code.google.com/p/expandselect/" rel="nofollow">http://code.google.com/p/expandselect/</a></p>

<p>Include this JS and just call that passing the param as your select id, like that:</p>

<pre><code>ExpandSelect(MySelect)
</code></pre>


blocks|key|1703154|text|我可能错了，但我不相信使用默认选择框可以做到这一点。您可以使用JS+&+CSS来实现所需的结果，但不是(据我所知)普通的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703155|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I may be wrong, but I don't believe that is possible with the default select box. You could do something with JS &amp; CSS that achieves the desired result, but not (to my knowledge) the vanilla SELECT.</p>


blocks|key|1703651|text|如果有人还在寻找这个问题，这就是我解决它的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703652|这是一种基于以下事实的解决方案:当大小增加时，选择看起来会扩大。我们可以增加大小，使其看起来是扩展的。让它看起来像是封闭的。通过这种方式，我们可以通过只使用焦点和模糊侦听器来处理大多数用例。|1703653|选择元素需要绝对定位，因为增加大小会增加元素的垂直高度。如果你有下面的元素，如果不这样做，它们将被下推。|1703654|我有一个包装器代码，它包装了元素并提供了open和close方法。|1703655|检查这个小提琴的用法：https://jsfiddle.net/10ar2ebd/16/|offset|length|1703656|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:+"+%2B+value;
++document.getElementById("result").appendChild(para);
});

document.getElementById("trigger").addEventListener('click',+function()+{
++selectionWrapper.open();
});|code-block|syntax|javascript|1703657|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/10ar2ebd/16/^0|0|0|0|0|B|X|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@$J|13|K|14|1|15]]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>If anyone is still looking for this,
This is how I solved it.</p>
<p>This is a solution based on the fact that the selection looks like it is expanded when the size in increased. We can increase size to make it look expanded. And reduce to make it seem closed. This way we can handle most use-cases by just having focus and blur listeners.</p>
<p>Select element needs to be absolutely positioned because increasing size will increase vertical height of element. If you have elements below, they will be pushed down if this is not done.</p>
<p>I have a wrapper code, that wraps the element and provides open and close methods.</p>
<p>Check this fiddle for usage: <a href="https://jsfiddle.net/10ar2ebd/16/" rel="nofollow noreferrer">https://jsfiddle.net/10ar2ebd/16/</a></p>
<pre><code>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(&quot;select_element&quot;), 7, function(value) {
  var para = document.createElement(&quot;DIV&quot;);
  para.textContent = &quot;Selected option: &quot; + value;
  document.getElementById(&quot;result&quot;).appendChild(para);
});

document.getElementById(&quot;trigger&quot;).addEventListener('click', function() {
  selectionWrapper.open();
});
</code></pre>


blocks|key|1703693|text|以下是https://jsfiddle.net/NickU/ahLy83mk/50/上的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703694|它使用size="x“打开下拉列表，同时保持下拉列表和父位置不变。代码还使用CSS样式在不需要时隐藏右侧滚动区域。我修改了我在stackoverflow上找到的代码，修复了问题并添加了样式。|1703695|HTML：|1703696|<div>DIV+example:+<select+id="dropdownDiv">
++++<option+value="Alpha">Alpha</option>
++++<option+value="Beta">Beta</option>
++++<option+value="Gamma">Gamma</option>
++++</select>
</div>

<table+id='tab1'>
<tr><td>Empty+Cell</td></tr>
<tr><td>+<select+id="dropdown1">
++++<option+value="Red">Red</option>
++++<option+value="Green">Green</option>
++++<option+value="Blue">Blue</option>
++++</select>
</td>
<tr><td><select+id="dropdown2">
<option+value="1">1</option><option+value="2">2</option><option+value="3">3</option><option+value="4">4</option><option+value="5">5</option><option+value="6">6</option><option+value="7">7</option><option+value="8">8</option><option+value="9">9</option><option+value="10">10</option><option+value="11">11</option><option+value="12">12</option><option+value="13">13</option><option+value="14">14</option><option+value="15">15</option><option+value="15">1</option><option+value="16">16</option><option+value="17">17</option><option+value="18">18</option><option+value="19">19</option><option+value="20">20</option><option+value="21">21</option></select>
</td></tr>
<tr><td>Empty+Cell</td></tr></table>
<br><button+id="fire"+type="button"+onclick="openDropdown('dropdownDiv',+this)"+>Show+dropdownDiv+items</button>
<button+id="fire"+type="button"+onclick="openDropdown('dropdown1',+this)"+>Show+dropdown1+items</button>
<button+id="fire"+type="button"+onclick="openDropdown('dropdown2',+this)"+>Show+dropdown2+items</button>|code-block|syntax|javascript|1703697|JavaScript：|1703698|++var+lastClosedElem+=+null;
++var+maxItemsInDropDown+=+12;
++function+openDropdown(elementId,+opener)
++{
+++++if+(lastClosedElem+!==+null+&&+lastClosedElem+===+opener)
+++++{
++++++++++++lastClosedElem+=+null;
++++++++++++return;
+++++}
+++++lastClosedElem+=+opener;
+++++
+++++function+down()
++++++{
++++++++++var+$this+=+$(this);

++++++++++var+td+=+$this.closest('td,div');
++++++++++if+(td+&&+td.length+>+0)
++++++++++++++td.height(td.height());

++++++++++var+pos+=+$this.offset();
++++++++++var+len+=+$this.find("option").length;
++++++++++if+(len+>+1+&&+len+<+maxItemsInDropDown)
++++++++++{
++++++++++++++$this.addClass('no-scroll');
++++++++++++++$this.addClass('noArrow');
++++++++++}
++++++++++else+if+(len+>+maxItemsInDropDown)
++++++++++{
++++++++++++++len+=+maxItemsInDropDown;
++++++++++}

++++++++++$this.css("position",+"absolute");

++++++++++var+_zIndex+=+$this.css("zIndex");
++++++++++if+(!_zIndex)
++++++++++++++_zIndex+=+'auto';
++++++++++$this.attr("_zIndex",+_zIndex);
++++++++++$this.css("zIndex",+9999);

++++++++++$this.attr("size",+len);+//+open+dropdown
++++++++++$this.unbind("focus",+down);
++++++++++$this.focus();
++++++}

++++++var+up+=+function()
++++++{
++++++++++var+$this+=+$(this);
++++++++++$this.css("position",+"static");
++++++++++$this.attr("size",+"1");
++++++++++$this.removeClass('no-scroll');
++++++++++$this.removeClass('noArrow');

++++++++++var+_zIndex+=+$this.attr("zIndex");
++++++++++if+(_zIndex)
++++++++++{
++++++++++++++$this.css("zIndex",+_zIndex);
++++++++++}
++++++++++$this.unbind("blur",+up);
++++++++++$this.unbind("click",+upClick);
++++++++++$this.focus();
++++++}

++++++function+upClick(e)
++++++{
++++++++++up.call(this);
++++++++++lastClosedElem+=+null;
++++++}

++++++$("#"+%2B+elementId).focus(down).blur(up).click(upClick).trigger('focus');
++}|1703699|CSS：|1703700|.no-scroll+{+cursor:+pointer;}
.no-scroll::-webkit-scrollbar+{display:none;}
.no-scroll::-moz-scrollbar+{display:none;}
.no-scroll::-o-scrollbar+{display:none;}
.no-scroll::-google-ms-scrollbar+{display:none;}
.no-scroll::-khtml-scrollbar+{display:none;}


.noArrow+{
++++-webkit-appearance:+none;
++++-moz-appearance:+none;
++++appearance:+none;
++++padding-left:+3px;
++++padding-right:+3px;
}


/*+Cosmetic+styles+*/
#tab1+tbody+tr:nth-child(even)+>+td,+div
{+++background:+linear-gradient(+180deg,+#efefef+1%25,+#eeeeee+15%25,+#e2e2e2+85%25);+
}
++++++++
#tab1+tbody+tr+td
{+++padding:+4px;+
}
++++++++
#tab1
{+++border:+1px+solid+silver;+
}|1703701|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/NickU/ahLy83mk/50/^0|3|13|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<p>Here is the solution on <a href="https://jsfiddle.net/NickU/ahLy83mk/50/" rel="nofollow noreferrer">https://jsfiddle.net/NickU/ahLy83mk/50/</a></p>
<p>It uses size=&quot;x&quot; to open the dropdown while maintaining the dropdown and parent positions. The code also uses CSS styles to hide the right scroll area when it is not needed. I modified the code I found on stackoverflow, fixed the problems and added styling.</p>
<p>HTML:</p>
<pre><code>&lt;div&gt;DIV example: &lt;select id=&quot;dropdownDiv&quot;&gt;
    &lt;option value=&quot;Alpha&quot;&gt;Alpha&lt;/option&gt;
    &lt;option value=&quot;Beta&quot;&gt;Beta&lt;/option&gt;
    &lt;option value=&quot;Gamma&quot;&gt;Gamma&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;table id='tab1'&gt;
&lt;tr&gt;&lt;td&gt;Empty Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt; &lt;select id=&quot;dropdown1&quot;&gt;
    &lt;option value=&quot;Red&quot;&gt;Red&lt;/option&gt;
    &lt;option value=&quot;Green&quot;&gt;Green&lt;/option&gt;
    &lt;option value=&quot;Blue&quot;&gt;Blue&lt;/option&gt;
    &lt;/select&gt;
&lt;/td&gt;
&lt;tr&gt;&lt;td&gt;&lt;select id=&quot;dropdown2&quot;&gt;
&lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;&lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;&lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;&lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;&lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;&lt;option value=&quot;6&quot;&gt;6&lt;/option&gt;&lt;option value=&quot;7&quot;&gt;7&lt;/option&gt;&lt;option value=&quot;8&quot;&gt;8&lt;/option&gt;&lt;option value=&quot;9&quot;&gt;9&lt;/option&gt;&lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;&lt;option value=&quot;11&quot;&gt;11&lt;/option&gt;&lt;option value=&quot;12&quot;&gt;12&lt;/option&gt;&lt;option value=&quot;13&quot;&gt;13&lt;/option&gt;&lt;option value=&quot;14&quot;&gt;14&lt;/option&gt;&lt;option value=&quot;15&quot;&gt;15&lt;/option&gt;&lt;option value=&quot;15&quot;&gt;1&lt;/option&gt;&lt;option value=&quot;16&quot;&gt;16&lt;/option&gt;&lt;option value=&quot;17&quot;&gt;17&lt;/option&gt;&lt;option value=&quot;18&quot;&gt;18&lt;/option&gt;&lt;option value=&quot;19&quot;&gt;19&lt;/option&gt;&lt;option value=&quot;20&quot;&gt;20&lt;/option&gt;&lt;option value=&quot;21&quot;&gt;21&lt;/option&gt;&lt;/select&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Empty Cell&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;br&gt;&lt;button id=&quot;fire&quot; type=&quot;button&quot; onclick=&quot;openDropdown('dropdownDiv', this)&quot; &gt;Show dropdownDiv items&lt;/button&gt;
&lt;button id=&quot;fire&quot; type=&quot;button&quot; onclick=&quot;openDropdown('dropdown1', this)&quot; &gt;Show dropdown1 items&lt;/button&gt;
&lt;button id=&quot;fire&quot; type=&quot;button&quot; onclick=&quot;openDropdown('dropdown2', this)&quot; &gt;Show dropdown2 items&lt;/button&gt;
</code></pre>
<p>JavaScript:</p>
<pre><code>  var lastClosedElem = null;
  var maxItemsInDropDown = 12;
  function openDropdown(elementId, opener)
  {
     if (lastClosedElem !== null &amp;&amp; lastClosedElem === opener)
     {
            lastClosedElem = null;
            return;
     }
     lastClosedElem = opener;
     
     function down()
      {
          var $this = $(this);

          var td = $this.closest('td,div');
          if (td &amp;&amp; td.length &gt; 0)
              td.height(td.height());

          var pos = $this.offset();
          var len = $this.find(&quot;option&quot;).length;
          if (len &gt; 1 &amp;&amp; len &lt; maxItemsInDropDown)
          {
              $this.addClass('no-scroll');
              $this.addClass('noArrow');
          }
          else if (len &gt; maxItemsInDropDown)
          {
              len = maxItemsInDropDown;
          }

          $this.css(&quot;position&quot;, &quot;absolute&quot;);

          var _zIndex = $this.css(&quot;zIndex&quot;);
          if (!_zIndex)
              _zIndex = 'auto';
          $this.attr(&quot;_zIndex&quot;, _zIndex);
          $this.css(&quot;zIndex&quot;, 9999);

          $this.attr(&quot;size&quot;, len); // open dropdown
          $this.unbind(&quot;focus&quot;, down);
          $this.focus();
      }

      var up = function()
      {
          var $this = $(this);
          $this.css(&quot;position&quot;, &quot;static&quot;);
          $this.attr(&quot;size&quot;, &quot;1&quot;);
          $this.removeClass('no-scroll');
          $this.removeClass('noArrow');

          var _zIndex = $this.attr(&quot;zIndex&quot;);
          if (_zIndex)
          {
              $this.css(&quot;zIndex&quot;, _zIndex);
          }
          $this.unbind(&quot;blur&quot;, up);
          $this.unbind(&quot;click&quot;, upClick);
          $this.focus();
      }

      function upClick(e)
      {
          up.call(this);
          lastClosedElem = null;
      }

      $(&quot;#&quot; + elementId).focus(down).blur(up).click(upClick).trigger('focus');
  }
</code></pre>
<p>CSS:</p>
<pre><code>.no-scroll { cursor: pointer;}
.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}


.noArrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 3px;
    padding-right: 3px;
}


/* Cosmetic styles */
#tab1 tbody tr:nth-child(even) &gt; td, div
{   background: linear-gradient( 180deg, #efefef 1%, #eeeeee 15%, #e2e2e2 85%); 
}
        
#tab1 tbody tr td
{   padding: 4px; 
}
        
#tab1
{   border: 1px solid silver; 
}
</code></pre>


blocks|key|1488522|text|通过这个问题和类似问题中提到的一些变通方法，可以打开一个"HTML+select“。然而，一种更简洁的方法是向您的项目中添加一个选择库，如"select2“或"chosen”。例如，以编程方式打开一个select2就像这样简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488523|$('#target-select').select2('open');|code-block|syntax|javascript|1488524|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Opening an "HTML select" is possible through some workarounds mentioned in this question and similar ones. However a cleaner way of doing this is to add a select library to your project like "select2" or "chosen". 
For instance, opening a select2 programmatically would be as easy as:</p>

<pre><code>$('#target-select').select2('open');
</code></pre>


blocks|key|1703363|text|这并不完全是您所要求的，但是我喜欢这个解决方案的简单性。在大多数情况下，我想要启动一个下拉列表，这是因为我正在验证用户是否确实做出了选择。我更改了下拉列表的大小并将其聚焦，这很好地突出了他们跳过的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703364|$('#cboSomething')[0].size+=+3;
$('#cboSomething')[0].focus();|code-block|syntax|javascript|1703365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is not exactly what you asked for, but I like this solution for its simplicity. In most cases where I am wanting to initiate a dropdown, it is because I'm validating that the user has actually made a selection. I change the size of the dropdown and focus it, which nicely highlights what they've skipped:</p>

<pre><code>$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();
</code></pre>


<p>How can you programmatically tell an HTML <code>select</code> to drop down (for example, due to mouseover)?</p>


How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

你如何以编程方式告诉一个超文本标记语言select下拉(例如，由于鼠标悬停)？

问如何以编程方式告诉HTML SELECT下拉(例如，由于鼠标悬停)？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何以编程方式告诉HTML SELECT下拉(例如，由于鼠标悬停)？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何以编程方式告诉HTML SELECT下拉(例如，由于鼠标悬停)？
EN