JQuery：单击父div时将焦点设置在选择上答案

【问题标题】：JQuery: Set focus on select when parent div is clickedJQuery：单击父div时将焦点设置在选择上
【发布时间】：2017-04-14 21:02:38
【问题描述】：

在一个看起来很简单的问题上苦苦挣扎，但我不知道我做错了什么。

场景：我有三个 .subblock 类的 div。一个里面有一个输入（文本），另外两个有一个选择。

目标：点击 .subblock (div) 时，关注输入或在其中选择。

代码（对选择不起作用）：

HTML

<div id="homeinputs">
    <form action="/listings/" method="GET">

        <div class="subblock" style="border-radius: 4px 0px 0px 4px;">
        <span>Where</span>
        <input id="autocomplete" name="location" type="text" placeholder="Location">
        </div>

        <div class="subblock" style="margin-left: -4px; margin-right: -4px;">
        <span>M<sup>2</sup></span>
        <select name="squarems">
            <option>All</option>
            <option>+10m<sup>2</sup></option>
            <option>+15m<sup>2</sup></option>
            <option>+20m<sup>2</sup></option>
            <option>+25m<sup>2</sup></option>                                   
            <option>+30m<sup>2</sup></option>
        </select>
        </div>

        <div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
        <span>Price (&euro;)</span>
        <select name="pricings">
            <option>All</option>
            <option>450max.</option>
            <option>500max.</option>
            <option>550max.</option>                                    
            <option>600max.</option>
        </select>
        </div>


</div>

$(document).ready( function() {

   $('.subblock').click( function() {
       $(this).find('input').focus();
   });

   $('.subblock').click( function() {
       $(this).find('select').focus();
   });

});

【问题讨论】：

在这些事件处理程序中放置一个 console.log 以查看它们是否被调用。 div 可能已经缩小到无法点击的大小。
我已经测试了你的代码，没有做任何修改，它正在工作......
抱歉，回复晚了。它们是可点击的。该代码对您有用@Badacadabra 吗？它注册输入，但在我的例子中不注册。
@ValentijnvandenHout 你想对选择做什么？
所以我有一个主页，其中包含一个表单：1 个文本输入，2 个选择（下拉）。单击这些后，数据将传输到下一页。这一切都有效。目前，您必须准确单击选择才能打开下拉菜单。我希望在单击父 div 时也发生这种情况。

标签： javascript jquery html select focus

【解决方案1】：

请试试这个并告诉我它是否是你想要的：

（当您的选择获得焦点时，只需按键盘上的Space 将其打开或使用箭头键在可用选项中导航...）

$(document).ready(function() {

  $('.subblock').click(function() {
    $(this).children().eq(1).focus();
  });

});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Focus</title>
</head>
<body>
  <div id="homeinputs">
    <form action="/listings/" method="GET">
      <div class="subblock" style="border-radius: 4px 0px 0px 4px;">
        <span>Where</span>
          <input id="autocomplete" name="location" type="text" placeholder="Location">
      </div>

       <div class="subblock" style="margin-left: -4px; margin-right: -4px;">
         <span>M<sup>2</sup></span>
         <select name="squarems">
           <option>All</option>
           <option>+10m<sup>2</sup></option>
           <option>+15m<sup>2</sup></option>
           <option>+20m<sup>2</sup></option>
           <option>+25m<sup>2</sup></option>
           <option>+30m<sup>2</sup></option>
         </select>
        </div>

        <div class="subblock" style="border-radius: 0px 4px 4px 0px; box-shadow: 0px 1px 2px lightgrey;">
          <span>Price (&euro;)</span>
          <select name="pricings">
            <option>All</option>
            <option>450max.</option>
            <option>500max.</option>
            <option>550max.</option>
            <option>600max.</option>
          </select>
        </div>
    </form>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

【讨论】：

差不多了。我想要的不是选择只是获得焦点，而是希望它打开下拉列表。比它更完美。
我明白了……这并不像你想象的那么容易。也许您应该阅读以下内容：http://stackoverflow.com/questions/16056666/expand-select-dropdown