Divs 下拉列表的行为类似于选择或组合答案

【问题标题】：Divs dropdown to behave like select or comboDivs 下拉列表的行为类似于选择或组合
【发布时间】：2016-04-01 07:15:56
【问题描述】：

我在一个包装 div 中有几个 div，它们都代表一个实体，请看图 1。

当我点击 Select 1 或 Select 2 .... 我需要打开某种下拉列表，我需要从中选择选项并更改 Select 的值，但此下拉列表的设计必须与选择 div 项，看图 2。

我查看了很多 jquery select 插件，但没有找到。谁能给我一些想法，或者如果知道可以解决此问题的插件。

这是html代码。

<!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>

谢谢。

【问题讨论】：

标签： javascript jquery html css combobox

【解决方案1】：

观看本教程：Simple Dropdown

UPDATE（如果想通过jquery打开）：

在我的示例中删除这个 css：

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

并使用 jquery：

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

【讨论】：

感谢您的回复 Ashish。这个例子是经典的 html 菜单。我的实体中不需要菜单选项。在菜单中，当单击选项元素时，链接会转到某处。我需要不同的功能，当单击选项元素以更改选择 div 中的值时，仅此而已，相同的行为，如组合或选择。
好的，那你做什么，在我给定示例的 CSS 中删除或注释这一行： .main_nav > li:hover .sub_nav{ background-color:#E4E4E4;显示：块； } 并使用 jquery： $(".main_nav > li").click(function(){ $('.sub_nav').show(); //关闭任何打开的菜单 $(this).find('.sub_nav' ).show(); //打开选中的菜单 })
非常感谢您对我的帮助！ :) 这是我可以使用的东西。我将添加这段代码$(".sub_nav > li").click(function () {alert("Option clicked! :)");});，这就是答案！再次感谢。健康长寿·繁荣昌盛！ @Ashish Panwar

【解决方案2】：

我假设您了解 Jquery 库。 Demo here。我想你可以从中得到一个想法。做一些改变你就能完成你的工作

 <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>

【讨论】：

感谢@Sajitha 的回复。您的回答与 Ashish Panwar 的回答非常相似，这是一个完整的解决方案。看他的链接。再次感谢您的努力。

【解决方案3】：

只是因为我不喜欢任何 jqwery，这里有一些纯 js 的解决方案。实际上，它还没有完全完成并会引发一些错误，但是您可以随意修复它

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>

【讨论】：