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

最新推荐文章于 2021-03-09 09:57:02 发布

weixin_34318326

最新推荐文章于 2021-03-09 09:57:02 发布

阅读量395

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/jiangli0502/blog/171322

本文介绍使用JavaScript和HTML实现一个可自定义的下拉选择框。通过设置样式和交互逻辑，该选择框能显示性别选项，并具备点击事件来设置选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

实现样式如下图：

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');
});

转载于:https://my.oschina.net/jiangli0502/blog/171322