Changing DIV tags functionality like select-option?

Question

I have the following HTML structure

<div class="categories">
    <div class="category">1</div>
    <div class="category">2</div>
    <div class="category">3</div>
</div>

I want to make this structure function like a SELECT/OPTION,(I can't change the tags) I have tried applying TOGGLE on the parent DIV, but that only opens and closes the DIV container, it doesn't change the functionality like SELECT-OPTION.

EDIT: Just changing it visually like a dropdown SELECT-OPTION type is enough.

Any help appreciated. Thank You.

Answer 1

You can try this: 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());
});