jQuery multiple click instances

Question

I've made a custom select box that opens when a button is clicked which works fine. However, with multiple select boxes on the same page when one button is clicked all of the select boxes are opened up. Is there a way to do this without applying separate classes to each select box and multiple functions for each select box ?

Here's my HTML.

<div class="select-box-wrap">
    <select class="select-box" name="mbpanel_layout_section_options[site_layout]">
        <option value="1" <?php if(1 == $options['site_layout']) echo 'selected'; ?>>Left Sidebar</option>
        <option value="2" <?php if(2 == $options['site_layout']) echo 'selected'; ?>>Right Sidebar</option>
        <option value="3" <?php if(3 == $options['site_layout']) echo 'selected'; ?>>Three Column</option>
        <option value="4" <?php if(4 == $options['site_layout']) echo 'selected'; ?>>Full Width</option>
    </select>
    <input type="button" class="select-click"/>
</div>

<div class="select-box-wrap">
    <select class="select-box" name="mbpanel_layout_section_options[post_layout]">
        <option value="1" <?php if(1 == $options['post_layout']) echo 'selected'; ?>>Left Thumbnail</option>
        <option value="2" <?php if(2 == $options['post_layout']) echo 'selected'; ?>>Right Thumbnail</option>
        <option value="3" <?php if(3 == $options['post_layout']) echo 'selected'; ?>>Top Thumbnail</option>
    </select>
    <input type="button" class="select-click"/>
</div>

and here's the jQuery.

(function($){
   $(".select-click").click(function () {
       var size = $('.select-box option').size();

       if (size != $(".select-box").prop('size')) {
           $(".select-box").prop('size', size);
           $(".select-box").addClass("select-open");
       } else {
           $(".select-box").prop('size', 1);
           $(".select-box").removeClass("select-open");
       }
    })
})( jQuery );

and here's a JSFiddle

Rory McCrossan · Accepted Answer · 2016-04-19 14:57:47Z

2

You need to use DOM traversal to find the .select-box related to the clicked button instead of using the class selector which affects all instances of the element. Try this:

(function($) {
    $(".select-click").click(function() {
        var $selectBox = $(this).prev('.select-box');
        var size = $selectBox.find('option').size();
        var sizeDifference = size != $selectBox.prop('size');
        $selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference);
    })
})(jQuery);

Working example

Note that I also changed the logic slightly with the use of a ternary expression to make the code shorter.

answered Apr 19, 2016 at 14:57

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

fdomn-m Over a year ago

DOM traversal pairs your code to your html layout - if this is an issue (in most cases it's not) then you can "pair" your .select-click and .select-box using data attributes and find them that way. If this is not an issue, this is a fine answer.

Mark Over a year ago

Thank you. That was exactly what i needed. Perhaps you could help further though if possible. Would there be a way to close the box if an option is clicked of if anywhere else on the page is clicked like a normal select box ?

Rory McCrossan Over a year ago

You just need to listen for a click outside of the select-box-wrap element, jsfiddle.net/descrs2p/4

Mark Over a year ago

Thank you that done the trick for clicking anywhere on the page but what about if clicked on one of the options ?

Mark Over a year ago

That's perfect! Thank you for all your help.

Collectives™ on Stack Overflow

jQuery multiple click instances

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related