Checkbox with a clickable a dropdownlist

Question

Hi I got a question about my code because I want to achieve the following checkbox with a clickable dropdownlist around it (which I had recorded on youtube to show you):

link: https://www.youtube.com/watch?v=ZodCcVHCAUo&feature=youtu.be

I have also put the code in jsfiddle so here is the link for it: http://jsfiddle.net/yomacho/ghv5aosv/

And I will also put the code here (but I can't put bootstrap.min.js because it's too long so you need to go the link above which I had given):

The html:

<div class="col-md-1">
    <li>
        <div id="ButtonDropDown" href="#" class="ButtonDropDown">
            <input type="checkbox" class="check">
                <select class="showDropdown">
                    <option value="volvo" >Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>

            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>                  
    </li>
</div>

And the css:

.showDropdown{
    display: none;
}

.ButtonDropDown:hover .showDropdown{
    display: block;
}

#ButtonDropDown{
    display: inline-block;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: blue;
    cursor: pointer;
}
.showDropdown{
    width: 15px;
}

I really appreciate it if someone also knows how to make a responsive version of it. And if someone knows the not responsive version of it, well then I also gladly wanna know that as well. Because i'm just curious about it hehe. Anyway thanks for your answer.

nklein · Accepted Answer · 2014-10-10 15:13:17Z

1

Are you looking for something like this? http://jsfiddle.net/nklein/Lm0t1aa8/

The following javascript prevents the dropdown from opening when you click on the checkbox, but allows the box to be checked.

$('.check').on('click', function (ev) {
    ev.stopPropagation();
});

EDIT:

I've updated the jsfiddle, the following events will add/remove the "caret" arrow when you hover/stop hovering over the element.

$('#selCars').on('mouseover', function (ev) {
    $('#selCars .caret-hover').addClass('caret');
});
$('#selCars').on('mouseout', function (ev) {
    $('#selCars .caret-hover').removeClass('caret');
});

edited Oct 10, 2014 at 15:13

answered Oct 10, 2014 at 14:38

nklein

793 bronze badges

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

4 Comments

superkytoz Over a year ago

Almost because the hovering part misses. So when I hover near the checkbox an arrows shows up. And when I click on it, then it shows a dropdownlist. I have already tried to hide the button in your code, but then I also hide the checkbox.. Which I don't actually want.

superkytoz Over a year ago

Hi thanks for your reaction again. But it's still not the same, because when the dropdown is shown and when I hover away from the button the "caret" arrow dissappears. Which shouldn't happen. And the button also changes if the "caret" arrow appears. Which also shouldn't happen.. If the last thing I had said is too much, then I don't mind having that.

nklein Over a year ago

When you say the button "changes", you're referring to how it resizes to fit the caret? Btw, I've updated the fiddle again, and included code comments to explain the javascript.

superkytoz Over a year ago

Yes, I had meant the shape of the button. Which changes from a square to a rectangle when I hover at it. But still I see the improvements :).

Collectives™ on Stack Overflow

Checkbox with a clickable a dropdownlist

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related