selectedIndex Weirdness

by dnag

HTML

<select id="test">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
</select>
<br /><br /><br />
<p>Debug Output</p>

CSS

body {
    margin: 50px 0 0 50px;
}
select {
	display: inline;
	font-family: Georgia, Serif;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	margin: 0;
	padding: 2px;
	color: #555;
	vertical-align: top;
	border: 1px solid #CCC;
}
.invis_wrapper {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
}
.invis_wrapper select {
    position: relative;
    z-index: 1;
}
.invis_wrapper img {
    position: absolute;
    left: 4px;
    top: 4px;
    // visibility: hidden;
    cursor: pointer;
}
.clear_select {
    cursor: pointer;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 6px 3px 6px;
    background: #FFFFC2;
    z-index: 0;
    font-family: Georgia, Serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    border: 1px solid #CCC;
    color: #999;
}

JavaScript

function select_mouse_out_timer(select_mouse_over)
{
    $("#"+select_mouse_over).siblings(".clear_select").animate({
        top: "0"
    }, 200);
}

function clear_select(select_id)
{
    $("#"+select_id).prop("selectedIndex", -1);
}

$(function(){
    var select_mouse_over = "";
    var select_timer;
    
    $("#test").prop("selectedIndex", -1);
	$("#test").wrap("<div class=\"invis_wrapper\"></div>");
	$("#test").parent().append("<div class=\"clear_select\" onclick=\"clear_select(\'test\')\">Clear</div>");
	$("#test").mouseover(function(){
		if($(this).prop("selectedIndex") != -1)
		{
			clearTimeout(select_timer);
			select_mouse_over = $(this).attr("id");
			$(this).siblings(".clear_select").mouseover(function(){
				clearTimeout(select_timer);
			}).mouseout(function(select_mouse_over){
				clearTimeout(select_timer);
				select_timer = setTimeout("select_mouse_out_timer(select_mouse_over)", 400);
			}).animate({
				top: "-24px"
			}, 200);
		}
	}).mouseout(function(select_mouse_over){
		if($(this).prop("selectedIndex") != -1)
		{
			clearTimeout(select_timer);
			select_timer = setTimeout("select_mouse_out_timer(select_mouse_over)", 400);
		}
	}).children("option").mouseover(function(){
		if($("#test").prop("selectedIndex") != -1)
		{
			clearTimeout(select_timer);
		}
	}).mouseout(function(select_mouse_over){
		if($("#test").prop("selectedIndex") != -1)
		{
			clearTimeout(select_timer);
			select_timer = setTimeout("select_mouse_out_timer(select_mouse_over)", 400);
		}
	});
});