javascript - first Dropdown hide on second drop down click event -

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

i using below code in 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 close select1 when user click on select2. please give me suggestion how this. me.

• jsfiddle here

update: check answer question: jquery drop down menu closing clicking outside

i added fiddle, works functionally dropdowns lose layout. can try calling hide() function when clicking on other dropdown, instead of $(document).