easyui实现如图样式的性别选择

实现样式如下图:

html代码:

<select id="sex" name="sex" style="width: 155px">
</select>
<div id="sex_opt">
	<div style="color: #0000EE; background: #fafafa; padding: 5px;text-align: center;">请选择性别</div>
	<div style="text-align: center;">
		<input type="radio" name="rsex" value="男"><span>男</span>
		<input type="radio" name="rsex" value="女"><span>女</span>
	</div>
</div>
js初始化代码

//性别初始化
$('#sex').combo({
	required:true,
	editable:false,
	panelHeight:50
});
$('#sex_opt').appendTo($('#sex').combo('panel'));
$('#sex_opt input').click(function(){
	var v = $(this).val();
	var s = $(this).next('span').text();
	$('#sex').combo('setValue', v).combo('setText', s).combo('hidePanel');
});

你可能感兴趣的:(easyui,combo)