CODEWITHSUNDEEP
javascriptjqueryhtml
trying_hal9000
trying_hal9000

Reputation: 4403

Jquery / Javascript onclick event to html open select tag

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>

Upvotes: 3

Views: 15721

Answers (4)

Rahul Desai
Rahul Desai

Reputation: 15501

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:

Upvotes: 2

Tejas
Tejas

Reputation: 711

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!

Upvotes: 16

Aditya
Aditya

Reputation: 1261

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

Upvotes: 4

Amit Joki
Amit Joki

Reputation: 59232

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.

Upvotes: 0

Related Questions