点击其他地方时如何"dropdown"选择？

Question

这是我拥有的东西：

具有几个选项的普通选择...

问题是，我确实需要单击其他一些div，当我单击该div时，我希望选择列表显示为正常单击列表，然后允许用户从选择选项中进行选择

我已经有一些代码了

<div onclick="set_select()"></div>
<select class='form-control' id='opts'>
<option selected disabled></option>
<option>Contacto</option>
<option>Entrevista</option>
<option>Prensa</option>
<option>Conferencias</option>
</select>
<script type="text/javascript">
function set_select(){
    var select = document.getElementById('opts');
    return select.active = true;
}   
</script>

Answer 1

使用纯 html/javascript 是不可能的。

Answer 2

您需要一些插件将标准选择字段替换为div，然后使用您的函数触发该div。一个是选择菜单：https://jqueryui.com/selectmenu/#product-selection还有更多可用的：https://www.google.pl/search?q=js+select+replacement&gws_rd=cr&ei=wN5ZV8SjMIGLsgGP_IboDQ

Answer 3

这是可能的"排序"，但并非微不足道，您可能需要对效果进行一些管理，就像我在选择的"更改"事件中所做的那样。 不完美，但也许这可以给你一个开始。

请注意，您可能只想在选择上使用"焦点"，或者像我在这里所做的那样设置可见大小，将更改时的选择大小设置为 0 并带有event.target.size = 0;等等。

稍微修改了标记以允许单击处理程序：

<div id="clicker">clicker</div>
<select class='form-control' id='opts'>
  <option selected disabled></option>
  <option>Contacto</option>
  <option>Entrevista</option>
  <option>Prensa</option>
  <option>Conferencias</option>
</select>

正如我所说，这是脚本，并不完美，但您可以决定如何处理更改/单击事件。

window.onload = function() {
  var id = "clicker";
  var div = document.getElementById(id);
  var select = document.getElementById("opts");
  div.onclick = function(event) {
    console.log('clicker div');
    select.size = select.options.length;
    select.focus();
  };
  select.onclick = function(event) {
    console.log('opt clicked');
  };
  select.onchange = function(event) {
    console.log('opt change');
    var index = event.target.selectedIndex;
    console.log(index);
    event.target.size = index + 2;
  };
}

这里有一个可以用来让你入门的小提琴：https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/

请注意，如果您希望对选择使用"默认"大小，您可以像这样检测：

 if (event.target.type == "select-one") {
   event.target.size = 1;
 } else {
   event.target.size = 4;
 }

以下是该更改的小提琴，并且在事件附件上更干净一些：https://jsfiddle.net/MarkSchultheiss/mL0b7ubr/1/