CODEWITHSUNDEEP
javascriptjqueryhtmlcsscombobox
Milos
Milos

Reputation: 143

Divs dropdown to behave like select or combo

I have a few divs in one wrapper div and all of them represents the one entity, look at image 1.

Image1

When I click on the Select 1 or Select 2 .... I need to open some kind of a dropdown list from which I need to chose option and change value of Select, but this dropdown list must be identical in design with Select div items, look at image 2.

Image2

I looked at a lot of jquery select plugins and I did not find the one. Can anyone give me some idea how I could do this or if know a plugin that could resolve this.

This is html code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="utf-8">      
        <style>
            .wrapper
            {
                width:330px;
                overflow:hidden; 
                border:solid 1px gray; 
                padding: 3px;                
            }
            .element
            {
                width:80px; 
                min-height: 30px; 
                border:solid 1px black; 
                background-color: orange; 
                text-align: center;
                line-height: 30px;                
            }
            .float-left
            {
                float: left;
            }            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="element float-left">
                Select 1
            </div>
            <div class="element float-left">                
                Select 2                
            </div>
            <div class="element float-left">
                Select 3
            </div>            
            <div class="element float-left">
                Select 4
            </div>            
        </div>

    </body>
</html>

Thanks.

Upvotes: 2

Views: 2494

Answers (3)

shmnff
shmnff

Reputation: 739

just because i don't like any jqwery, here is some solution by pure js. actually, it isn't quite finished and throws some error, but you can fix it as you like

var Ready = function(){
  var menu = document.querySelector('.wrapper');
  var elementsList = menu.querySelectorAll('.container');
  var toggleSubmenu = function(e){
    var current = e.target.parentNode.querySelector('.submenu');
    for(var i=elementsList.length; i--;){
      var element = elementsList[i].querySelector('.submenu');
      if (element!==current && element.classList.contains('opened'))
        element.classList.remove('opened');
    }
    current.classList.toggle('opened');
  };
  menu.addEventListener('click', toggleSubmenu);
};
document.addEventListener( 'DOMContentLoaded', Ready );
.wrapper {
  width: 330px;
  overflow: hidden;
  border: solid 1px gray;
  padding: 3px;
  cursor: pointer;
}
.select, .option {
  width: 80px;
  min-height: 30px;
  border:solid 1px black;
  background-color: orange;
  text-align: center;
  line-height: 30px;
  position: relative;
}
.container {
  float: left;
}
.submenu {
  position: absolute;
  height: 0;
  overflow: hidden;
}
.opened {
  height: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div class="wrapper">
     <div class="container">
        <div class="select">Select 1</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 2</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 3</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 4</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
  </div>
</body>
</html>

Upvotes: 0

Ashish Panwar
Ashish Panwar

Reputation: 1128

watch this tutorial: Simple Dropdown

UPDATE (if want to open through jquery):

Remove this css in my example:

 .main_nav > li:hover .sub_nav{
        background-color:#E4E4E4;
        display:block;
    }

and use jquery:

    $(".main_nav > li").click(function(){
           $(' .sub_nav').show();
          $(this).find('.sub_nav').show();
   });

Upvotes: 2

Sajitha Rathnayake
Sajitha Rathnayake

Reputation: 1728

I assume you know about the Jquery libraries. Demo here. I think you can get an idea from this. Do some changes you will able to do your job

 <style>
    .wrapper
    {
        width:330px;
        overflow:hidden; 
        border:solid 1px gray; 
        padding: 3px;                
    }
    .element
    {
        width:80px; 
        min-height: 30px; 
        border:solid 1px black; 
        background-color: orange; 
        text-align: center;
        line-height: 30px;                
    }
    .float-left
    {
        float: left;
    }            
</style>

<div class="wrapper">
    <div class="element float-left">
        Select 1
    </div>
    <div class="element float-left">                
        Select 2
        <div class='options'>
            <div class='element'>Option 1</div>
            <div class='element'>Option 2</div>
            <div class='element'>Option 3</div>
            <div class='element'>Option 4</div>
        </div>                
    </div>
    <div class="element float-left">
        Select 3
        <div class='options'>
            <div class='element'>Option 1</div>
            <div class='element'>Option 2</div>
            <div class='element'>Option 3</div>
            <div class='element'>Option 4</div>
        </div>  
    </div>            
    <div class="element float-left">
        Select 4
    </div>            
</div>
<script type="text/javascript">
$(document).ready(function(){
    $(".options").slideUp(0);
    $(".element").click(function(){
        $(".options").hide(0);
        $(this).find('.options').slideDown(100);
    });

});
</script>

Upvotes: 2

Related Questions