JQuery: Set focus on select when parent div is clicked

Question

Struggling with a problem that seems like it must have an incredibly simple solution, but I can't figure out what I am doing wrong.

Scenario: I have three div's of class .subblock. One has an input(text) inside, the other two have a select.

Goal: When clicked on .subblock (div), focus on the input or select in it.

Code (that doesn't work for the selects):

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>

JS

$(document).ready( function() {

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

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

});

Put a console.log inside those event handlers to see if they are being called. The div may have shrunk to a size that you cannot click on it. — Chip Dean, Apr 14 '17 at 21:04
I have tested your code without any modification and it is working... — Badacadabra, Apr 14 '17 at 21:12
Sorry for the incredibly late response. They are clickable. The code is working for you @Badacadabra ? It registers for input, but not for the selects in my case. — Valentijn van den Hout, Apr 20 '17 at 16:45
@ValentijnvandenHout What do you want to do exactly with selects? — Badacadabra, Apr 20 '17 at 16:48
So I have a homepage that includes a form: 1 text input, 2 selects (dropdown). When these are clicked the data is transferred to the following page. This all works. Currently, you have to click exactly on the select in order to open the dropdown. I want this to happen as well when the parent div is clicked. — Valentijn van den Hout, Apr 20 '17 at 16:54

Badacadabra · Answer 1 · 2017-04-20T17:17:43.630

Please try this and tell me if it is what you want:

(When your select has focus, just press Space on your keyboard to open it or use your arrow keys to navigate in the available options...)

$(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>

Nearly. What I want is for instead of the select just getting focus, I want it to open the dropdown. Than it's perfect. — Valentijn van den Hout, Apr 20 '17 at 17:26
I see... This is not as easy as you think. Maybe you should read this: [http://stackoverflow.com/questions/16056666/expand-select-dropdown](http://stackoverflow.com/questions/16056666/expand-select-dropdown) — Badacadabra, Apr 20 '17 at 17:56

JQuery: Set focus on select when parent div is clicked

1 Answers1