Jquery / Javascript onclick event to html open select tag

Question

I have a span that I have positioned on top of a select tag, when you click on the select tag the menu opens to select a value, but when you click on the span positioned on top of the select tag nothing happens. Is there an jquery way to use on click that will open the select tag menu?

<select id="support_support_type" name="support[support_type]">
  <option value="Contact">Contact</option>
  <option value="Feedback">Feedback</option>
  <option value="Help">Help</option>
</select>
<span class="drop down-arrow"></span>

Tejas · Accepted Answer · 2015-01-14 06:40:24Z

16

Is the span positioned absolute over the select box? If so, it's a lot more convenient to use CSS' pointer-events for that. Given that it's compatible with almost all browsers, I would use it for production. CSS rules generally are also preferred over javascript hackery.

Add this to your CSS file and you'll be good to go.

.drop.down-arrow{
    pointer-events: none;
}

What that does is basically allows the cursor to click through it to the <select> under it. Hope I was helpful!

answered Jan 14, 2015 at 6:40

Tejas

7113 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lewis Over a year ago

Elegent solution, however I'm using hover etc to render styles on the selector. :/

Aditya · Accepted Answer · 2015-01-14 06:15:00Z

4

You want to trigger the click event of select tag when you click on the span. So set up a jquery function like this:

$('span').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});

WORKING DEMO

answered Jan 14, 2015 at 6:15

Aditya

1,2615 gold badges21 silver badges32 bronze badges

Comments

Rahul Desai · Accepted Answer · 2015-01-14 06:57:03Z

2

You can use .attr() and set it to show/hide the avilable options.

Working Code Snippet:

var toggle = true;
$("span.down-arrow").on("click", function(){
  if(toggle){
    $("select#support_support_type").attr('size', 3); // show all 3 options
    toggle = false;
  }
  else{
    $("select#support_support_type").attr('size', 1); // show only the selected option
    toggle = true;
  }
});

$('select#support_support_type').on("change", function() {
  $(this).attr('size', 1); 
  toggle = true;
});

span{
  vertical-align: top;
}

select{
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="support_support_type" name="support[support_type]">
  <option value="Contact">Contact</option>
  <option value="Feedback">Feedback</option>
  <option value="Help">Help</option>
</select>

<span class="drop down-arrow">span</span>

Readup:

.attr() | jQuery

edited Jan 14, 2015 at 6:57

answered Jan 14, 2015 at 6:13

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

3 Comments

trying_hal9000 Over a year ago

could I add this inline using <span class="drop down-arrow" onclick=""></span>?

Rahul Desai Over a year ago

@trying_hal9000 Yes, you can do that. By the way, I have updated my answer with the code and a working code snippet.

Rahul Desai Over a year ago

@trying_hal9000 To achieve what you are trying to do, you need to make appropriate changes in the JS.

Amit Joki · Accepted Answer · 2015-01-14 06:11:08Z

0

I suppose what you want is the functionality that labels offer. So, you would be better off using <label>, instead of binding.

<label for="support_support_type">Select</label>
<select id="support_support_type" name="support[support_type]">
   <option value="Contact">Contact</option>
   <option value="Feedback">Feedback</option>
   <option value="Help">Help</option>
</select>

Now, you've what <span> does, that is display the text, but when you click on it, the <select> would automatically get focused.

answered Jan 14, 2015 at 6:11

Amit Joki

59.4k7 gold badges80 silver badges97 bronze badges

1 Comment

trying_hal9000 Over a year ago

Sorry I don't understand, I tried changing the span into a label and using relative position put it on top of the select tag, but the drop down does not appear when it's clicked

Collectives™ on Stack Overflow

Jquery / Javascript onclick event to html open select tag

4 Answers 4

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related