使用<div><ul><li>模拟<select>下拉框
<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 id="dropdown">
<div id="input_select"> 中文<img src="images/chinese.jpg" /></div>
<ul id="language">
<li><a href="#" rel="2">中文<img src="images/chinese.jpg" /></a></li>
<li><a href="#" rel="3">日语<img src="images/Amex-56.png" /></a></li>
<li><a href="#" rel="4">韩语<img src="images/Visa-56.png" /></a></li>
<li><a href="#" rel="5">英语<img src="images/Cash-56.png" /></a></li>
</ul>
</div>
<a href='#' style="float:right; margin-right:-112px; margin-top:5px;">退出</a>
<div style="float:none;"></div>
<div id="result"></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 id="payments" name="payments" style="width:250px;">
<option value="amex" data-image="images/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="images/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="images/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="images/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="images/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="images/Paypal-56.png" data-description="Pay and get paid...">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);
}
