<style>
body {
padding: 0;
margin: 0;
font-size: 12px;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
#dropdown {
position: relative;
float: right;
margin-left: 5px;
margin-right: 50px;
}
#input_select {
width: 68px;
height: 19px;
line-height: 18px;
background: #e8f5fe;
color: #807a62;
text-align: center;
border: 1px solid #a9c9e2;
}
#input_select a {
display: block;
height: 19px;
color: #807a62;
text-decoration: none;
}
#input_select img {
margin-left: 4px;
margin-bottom: -4px;
width: 16px;
height: 16px;
}
#dropdown ul {
width: 68px;
background: #e8f5fe;
margin-top: -1px;
position: absolute;
display: none;
border: 1px solid #a9c9e2;
}
#dropdown ul li {
height: 19px;
line-height: 24px;
text-indent: 10px;
}
#dropdown ul li img {
margin-left: 4px;
margin-bottom: -4px;
width: 16px;
height: 16px;
}
#dropdown ul li a {
display: block;
height: 19px;
color: #807a62;
text-decoration: none;
}
#dropdown ul li a:hover {
background: #c6dbfc;
color: #369;
}
#result {
margin-top: 10px;
text-align: center;
}
</style>
extjs实现
<script src="ext/adapter/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(
function fn() {
var inp = Ext.get("input_select");
inp.on("click", function () {
var ul = Ext.get('language');
ul.slideIn();
})
var li_a = Ext.select('ul li a');
li_a.each(function (el, this_, index_i) {
var ob = Ext.get(el.dom);
ob.on('click', function () {
var html = ob.dom.innerHTML;
//alert(html);
inp.insertHtml = html;
document.getElementById('input_select').innerHTML = html;
//alert(inp.dom.innerHTML)
Ext.get('language').hide();
});
})
});
</script>
jquery实现
<script src="js/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(function () {
$("#input_select").click(function () {
var ul = $("#dropdown ul");
if (ul.css("display") == "none") {
ul.slideDown("fast");
} else {
ul.slideUp("fast");
}
});
$("#dropdown ul li a").click(function () {
var txt = $(this).html();
$("#input_select").html(txt);
$("#dropdown ul").hide();
$("#result").html("您选择了" + txt + "，值为：" + value);
});
});
</script>
html代码
<div ></div>
jquery+select
<script src="js/jquery-1.4.1.js"></script>
<!-- <msdropdown> -->
<link href="js/dd.css" rel="stylesheet" />
<script src="js/jquery.dd.min.js"></script>
<!-- </msdropdown> -->
<script>
//var tc;
$(document).ready(function (e) {
$("#payments").msDropdown({ visibleRows: 4 });
});
</script>
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
<tr>
<td valign="top">
<select >Paypal</option>
</select>
</td>
</tr>
</table>
ext.net实现
aspx页面
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="iconCls" />
<ext:RecordField Name="name" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:ComboBox
ID="ComboBox1"
runat="server"
StoreID="Store1"
Width="98"
Editable="false"
DisplayField="name"
ValueField="name"
Mode="Local"
TriggerAction="All"
Style="float:none;"
>
<Template runat="server">
<Html>
<tpl for=".">
<div class="x-combo-list-item icon-combo-item {iconCls}">
{name}
</div>
</tpl>
</Html>
</Template>
<Listeners>
<Select Handler="this.setIconCls(record.get('iconCls'));" />
</Listeners>
</ext:ComboBox>
cs页面
/// <summary>
/// 数据加载
/// </summary>
private void InitLanguage()
{
this.Store1.DataSource = new object[]
{
new object[] { ResourceManager.GetIconClassName(Icon.FlagCn), "Chinese"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagEg), "English"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagJp), "Japanese"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagKr), "Korean"}
};
this.Store1.DataBind();
ResourceManager1.RegisterIcon(Icon.FlagCn);
ResourceManager1.RegisterIcon(Icon.FlagEg);
ResourceManager1.RegisterIcon(Icon.FlagJp);
ResourceManager1.RegisterIcon(Icon.FlagKr);
ComboBox1.SetValue("Chinese");
ComboBox1.IconCls = ResourceManager.GetIconClassName(Icon.FlagCn);
}