Question

这就是我拥有的东西：

正常选择，有几个选项......

问题是，我确实需要点击其他div，当我点击那个时，我希望选择列表在正常点击时显示，然后允许用户从选择选项中进行选择< / p>

我已经有了一些代码

<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

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

注意你可能只想在选择上使用“焦点”，或者像我这样设置可见大小，使用event.target.size = 0;将更改的选择大小设置为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/

如何＆＃34;下拉＆＃34;点击其他地方的选择？

3 个答案: