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>
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>
Share
Improve this question
asked Jan 14, 2015 at 6:09
trying_hal9000trying_hal9000
4,4038 gold badges44 silver badges63 bronze badges
0
4 Answers
Reset to default 16Is the span position
ed absolute
over the select box? If so, it's a lot more convenient to use CSS' pointer-events for that. Given that it's patible 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!
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
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./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
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.