改变DIV标签的功能，比如选择选项

你可以试试:http://jsfiddle.net/VRjfm/

$('.categories').prepend('<span>select options</span>');
$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});
$('.category').click(function(e){
  e.stopPropagation(); // <--this will stop the event bubbling to its parent.
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});

使用以下javascript代码。这将解决你的问题

JS Bin http://jsbin.com/utoyej/43/edit

  //This is while page load showing first element
        jQuery('.category').addClass('inactive').hide();
        jQuery('.category:first').addClass('active').removeClass('inactive').show();
  //Showing all option
        jQuery('.categories').mouseover(function(){
          jQuery('.category').show();
        });
   //Showing selected option
        jQuery('.categories').mouseleave(function(){
          jQuery('.categories .inactive').hide();
        });
 //Onclick making the option active
        jQuery('.category').click(function(){
            jQuery('.category').addClass('inactive').removeClass('active');
          jQuery(this).addClass('active').removeClass('inactive');
          jQuery('.categories .inactive').hide();

        });

我已经完成了以下操作:

HTML Part:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="dd" class="select-wrapper">--- Select ---
<div class="categories">
 <div class="category">1</div>
 <div class="category">2</div>
 <div class="category">3</div>
</div>

CSS Part:

.select-wrapper {
    /* Size & position */
    position: relative;
    width: 200px;
    margin-top: 25px;
    margin-left: 25px;
    padding: 12px 15px;
    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.select-wrapper:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}
.select-wrapper .categories {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.select-wrapper .categories div {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

/* Hover state */
.select-wrapper .categories div:hover {
    color: #57a9d9;
}
/* Active state */
.select-wrapper.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}
.select-wrapper.active:after {
    border-color: #82d1ff transparent;
}
.select-wrapper.active .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}
.select-wrapper:focus {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}
.select-wrapper:focus:after {
    border-color: #82d1ff transparent;
}
.select-wrapper:focus .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;
            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }
    $(function() {
        var dd = new DropDown( $('#dd') );
        $(document).click(function() {
            // all dropdowns
            $('.select-wrapper').removeClass('active');
        });
    });

查看实际操作:http://jsfiddle.net/john_rock/LhUsc/

我想这也许能帮助你解决你的问题。

你可以在内部('. category ')div中添加一个click事件，并在那里捕获"selected"值。

,

var selectedValue = '';
$('.category').click(function () {
  selectedValue = $(this).text();
  $('.categories').hide(); /* if you want to hide the options panel */ 
});

jsFiddle演示

EDIT:我修改了jsFiddle以显示自定义标签在div有一个新的选择之后。

对于纯JavaScript解决方案，此jsFiddle使用简单插件，具有出色的动画效果和配置设置。

  <div class="categories" id="examplePanel1" style="position:absolute; width:150px; height:75px; top:20px; left:0px; background:#a6bbcd; text-align:center; overflow:hidden;">
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); dark(); return false;">1 - Dark</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); light(); return false;">2 - Light</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); image(); return false;">3 - Image</div>
  </div>

// Div 1 choice: Show purple color via image.
function light() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/FFFF99&text=Light)";
}
// Div 2 choice: Show yellow color via image.    
function dark() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/333399&text=Dark)";
}
// Div 3 choice: Show image
function image() {
  document.getElementById('theBox').style.backgroundImage = "url(http://www.gravatar.com/avatar/66cc4497ef4e7a711a1f83e6a74cfea1?s=100&d=identicon&r=PG)";
}

面板动画和教程

如果你喜欢jsFiddle，请查看面板动画链接，通过配置查看许多不同类型的动画