jquery: custom select box?

hey guys, i'm trying to do a rather simple select box by myself.

<div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

When the page is loaded only the first li-item is set to display:block. When I click on the first one, all options should be displayed.

So far so goo开发者_运维知识库d...

/*select box*/
$('.select ul li.option').click(function() {
    $('.select ul li.option').fadeIn('fast');
});

However now I'm stuck. When I click e.g. on the second option this one should have the .darr class applied and the the dropdown should collapse again with the second option visible. You know what I mean!

Any idea how to solve that? With toggle()?

Here is a fiddle, so you see what I mean! http://jsfiddle.net/WFTvq/

$('.select ul li.option').click(function() {
        $(this).siblings().toggle().removeClass('darr');
        $(this).addClass('darr');
    });

can you check this?

There's a good way to do it ! ^^ I just made it few seconds ago ;)

HTML

<div class="styledSelect">
                <span class="styledSelectValue"></span>
                <select name="type">
                    <option value="">Par type de propriété</option>
                    <option value="choix2">choix2</option>
                    <option value="choix3">choix3</option>
                </select>
            </div>

CSS

.styledSelect{/*your css for the background image... it will be the body of your select*/}
.styledSelect select{/*your css with opacity:0;*/}
.styledSelectValue{/*the css of the received value*/}

jQuery

$('.styledSelect').each(function(){
            selectValue = $(this).children("select").val();
            if(selectValue == ""){selectValue = $(this).children("select").children("option:eq(0)").text();}
            $(this).children(".styledSelectValue").text(selectValue);
        });
        $('.styledSelect select').change(function(){
            selectValue = $(this).val();
            if(selectValue == ""){selectValue = $(this).children("option:eq(0)").text();}
            $(this).parent(".styledSelect").children(".styledSelectValue").text(selectValue);
        });

It's the best way i found ;)

try

$('.select ul li.option').click(function() {
$('.select ul li.option').fadeIn('fast');
$('.select ul li.darr').removeClass('darr');
$(this).addClass('darr');});

Use CSS and jQuery:

CSS:

.select {
    width: 10em;
    margin: 0 auto;
}

li.option {
    width: 100%;
    border: 1px solid #ccc;
    display: none; /* <- hides the li elements of class 'option' */
}

ul:hover li.option {
    display: block; /* <- shows all options on ul:hover */
}

li.option.darr {
    display: block;
}

jQuery:

$('li.option').click(
    function(){
        $('.darr').removeClass('darr');
        $(this).addClass('darr');
    });

JS Fiddle demo.