下拉列表框_html/css

确认预约

function sex(){
var rs=document.getElementsByName('a');
for(var i=0; i if(rs[i].check){
alert(rs[i].value==0?"女":"男");
break;
}
}
}



(function($){
//获取select
var selects=$('select');
for(var i=0; i createSelect(selects[i],i);
}
function createSelect(select_container, index){
var tag_select=$('');
tag_select.attr('class','select_box');
tag_select.insertBefore(select_container);

var select_showbox=$('');
//容易出错appendTo
select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
//容易出错
var ul_option=$('')
ul_option.attr('class','select_option');
ul_option.appendTo(tag_select);
createOptions(index,ul_option);


tag_select.toggle(function(){
ul_option.show();
},function(){
ul_option.hide();
});

var li_option=ul_option.find('li');
li_option.on('click',function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).text();
select_showbox.text(value);
ul_option.hide();
});

li_option.hover(function(){
$(this).addClass('hover').siblings().removeClass('hover');
},function(){
li_option.removeClass('hover');
});

}
function createOptions(index,ul_list){
//获取被选中的元素并将其值赋值到显示框中
var options=selects.eq(index).find('option'),
selected_option=options.filter(':selected'),
selected_index=selected_option.index(),
showbox=ul_list.prev();
showbox.text(selected_option.text());

//为每个option建立个li并赋值
for(var n=0;n var tag_option=$('

//为被选中的元素添加class为selected
if(n==selected_index){
tag_option.attr('class','selected');
}
}
}

})(jQuery)