first Dropdown hide on second drop down click event

Question

I am using 2 codrops dropdwon menus in single page. I want to close the first drop down menu when user clicks on the 2nd drop down menu.

I am using below code in my project.

<select id="Select1" class="cd-select">
    <option value="-1" selected>Menu 1</option>
    <option value="7" >subMenu1</option>
    <option value="8" >subMenu2</option>
    <option value="9" >subMenu3</option></select>

// 2nd Menu
<select id="Select2" class="cd-select">
    <option value="-1" selected>Menu 2</option>
    <option value="2" >subMenu1</option>
    <option value="5" >subMenu2</option></select>

.aspx Page Java Script

<script type="text/javascript">
    $(function () {
        $('#Select1').dropdown({
            gutter: 5,
            stack: false,
            delay: 100,
            slidingIn: 100
        });
        $('#Select2').dropdown({
            gutter: 5,
            stack: false,
            delay: 100,
            slidingIn: 100
        });
    });
</script>

I want to close Select1 when user click on Select2. Please give me suggestion how to do this. Help me.

JSFiddle here

Please do not include the entire codebase of a plugin you are using. We only require the code you have written. — Rory McCrossan, Sep 19 '14 at 10:39

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

Update: check the answer to this question: jquery drop down menu closing by clicking outside

I added it to your fiddle, it works functionally but the dropdowns lose their layout. You can try calling the hide() function when clicking on the other dropdown, instead of $(document).

edited May 23 '17 at 10:33

Community

1
1

answered Sep 19 '14 at 10:51

FDM

628
6
18

actually I want to close the first dropdown - not to close that dropdown – prog1011 Sep 19 '14 at 10:55

score 0 · Answer 2 · answered Sep 20 '14 at 10:39

I got the solution - I just put this code inside document.ready() function and it works.

$('.cd-dropdown').click(function() {
$('.cd-active').not($(this))
        .removeClass('cd-active')
        .children('ul').css('height', 'auto')
        .children('li').css('top', 0);});

Thanks

first Dropdown hide on second drop down click event

2 Answers2