读书人
栏目▼

可编辑的DropDownList,该如何处理

发布时间： 2012-01-24 23:11:55 作者： rapoo

可编辑的DropDownList
如上！

[解决办法]
<input type=text name=re_name style="width:100px;height:22px;font-size:10pt;"><span style="width:18px;"><select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
</select>
</span>
[解决办法]
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可输入的select</title>
<style>
.optionForSel {font-size:9pt}
</style>
</head>

<body leftmargin="50" topmargin="50">

<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">
<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
</td>
<td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">
<img src="images/button2.gif" border="0" id="mm" onclick="mm_Click()" align="absmiddle" width="18" height="18">
</td>
</tr>
</table>
<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:10">
<table width="100%" cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White">
<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit1
</td>
</tr>


<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit2
</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''" onclick="document.all.selectedValue.innerText=this.innerText">
Visit3
</td>
</tr>
</table>
</div>

<script>
function mm_Click(){
if (document.all.dropdownOption.style.visibility == 'visible')
document.all.dropdownOption.style.visibility = 'hidden'
else
document.all.dropdownOption.style.visibility = 'visible'
}

function init(){
document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;
document.all.selectedValue.contentEditable = true;
var strTop = 0;
var strLeft = 0;
var e1 = document.all.selectLength;
while(e1.tagName != "BODY"){
strTop += e1.offsetTop
strLeft += e1.offsetLeft
e1 = e1.offsetParent
}
document.all.dropdownOption.style.top = String(strTop + 24) + "px";
document.all.dropdownOption.style.left = String(strLeft) + "px";
}

function clickE(){
if(window.event.srcElement.id !='mm')
document.all.dropdownOption.style.visibility = 'hidden';
}

document.onclick = clickE
window.onload = init
</script>
<br>
<br>
<input type="button" value="得到选中的值" onclick="alert(document.all.selectedValue.innerText)">

</body>
</html>
[解决办法]
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}

if (isIE()<5.5)
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><!--<iframe id=selframe frameborder=0 height=100%></iframe>--><div id="selecthtml" class="selectcontent">selectáD表</div></div>'


}
else
{
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectáD表</div></div>'
}

document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

function editselect(name,size,defaulttext,width,height,readonly){
var combo=this;
this.options=new Array();
this.oj=new Array();
this.name=name;
this.divname=name+'_div';
this.buttonname=name+'_button';
this.tablename=name+'_table';
this.htmltable=name+'_html'
if (!height) this.height=0; else this.height=height
if (width) this.width=width
if (!size) size=8
if (!defaulttext) defaulttext=""
if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}

esHTML='<div id='+this.divname+'>'
+'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
+'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
+'</div>'
document.write(esHTML)
this.sbutton=eval("document.all."+this.buttonname)

if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()}

this.sbutton.onclick=function(){combo.show()}
this.show=function(){
pDiv=eval(combo.divname)
pTable=eval(combo.tablename)
var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
for (i=0;i<combo.options.length;i++)
{
vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]
}
vHTML+="</table>"
vDivHtml.innerHTML=vHTML

vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+2


vParent = pDiv.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
vleft += vParent.offsetLeft;
vtop += vParent.offsetTop;
vParent = vParent.offsetParent;
}

var redge=document.body.clientWidth-vleft
var bedge=document.body.clientHeight-vtop



if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}


if (combo.height==0)
{
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}
else
{
if (htmltable.offsetHeight>combo.height)
{
vDiv.style.pixelHeight=combo.height
vDivHtml.style.pixelHeight=combo.height


}
else
{

vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}

}

vDivHtml.scrollTop=0

if (redge<vDiv.offsetWidth)
vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
else
vDiv.style.left=vleft-1


if (bedge<vDiv.offsetHeight)
//vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
vDiv.style.top=vtop-vDiv.offsetHeight+bedge


else
vDiv.style.top=vtop


vDivHtml.style.width=parseInt(vDiv.style.width)
vDiv.style.visibility="visible"
}

this.add=function(text,js){
combo.options[combo.options.length]=text
combo.oj[combo.oj.length]=js

}

this.clearall=function(){
combo.options=new Array()
}

this.about=function(){

}
}


function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}

function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}

document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;

x1=vDiv.offsetLeft
y1=vDiv.offsetTop

x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight

if (mx<x1 || my<y1 || x2<mx || y2<my)
{
vDiv.style.visibility='hidden'
}
}
}</script>


<style>
.selecttext{
border:0px
height: 16;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 19;
width: 16;
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}

.selectdiv
{
position: absolute;
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<body bgcolor="#83A5EB">


<table border="0" width="100%">
<tr>
<td width="151" align="center"><font size="2">可编辑的Select</font></td>
<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
</tr>
<tr>
<td width="151" align="center"><font size="2">长度可以随意修改<br>可以设置为只读</font></td>
<td>
<script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形")

sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
</td>
</tr>
<tr>
<td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
<td>
<script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
</td>
</tr>
<tr>
<td width="151" align="right">　</td>
<td><select><option>系统的Select</option></select>　</td>
</tr>
</table>
</body>

</html>



[解决办法]
汗,我用的一个textbox 和一个下拉列表结合实现的,
<div id="Layer1" style="position:absolute; width:157px; height:40px; z-index:0; left: 333px; top: 96px;clip:rect(0,100,30,60)">
<select name="select" onchange="txtID.value=this[selectedIndex].text">
<option>中共党员</option>
<option>共青团员</option>
<option>群众</option>
<option>国民党</option>
</select>
</div>
<div id="Layer2" style="position:absolute; width:157px; height:40px; z-index:2; left: 333px; top: 95px">
<asp:TextBox ID="txtID" runat="server" Width="60"></asp:TextBox>
</div>

最后取txtID.Text就可以了.定位的话可以改变两个div的left和top的值使之到你想要的位置上.
[解决办法]
可编辑的下拉菜单VB.NET控件源码
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace CBDAspNet.WebControls.HTML
<ToolboxData("<{0}:TextBox runat=""server""/>")> _
Public Class TextBox

Inherits System.Web.UI.WebControls.TextBox

Private _values As DataTable

Private _DropDownList As DropDownList

Private _DropDownListName As String
Private _SelectType As Byte = 1
Private _Js_onChange As String = ""
Private _LableText As String = ""
Private _LableWidth As Integer = 0
Private _LableClass As String = ""
Private _SelectedValue As String

Public Sub New()
_DropDownList = New DropDownList
_values = New DataTable
End Sub

Public Property Values() As DataTable
Get
Return _values
End Get
Set(ByVal Value As DataTable)
_values = Value
End Set
End Property

Public Property DropDownListName() As String
Get
Return _DropDownListName
End Get
Set(ByVal Value As String)
_DropDownListName = Value
End Set
End Property
Public Property SelectType() As Byte
Get
Return _SelectType
End Get
Set(ByVal Value As Byte)
_SelectType = Value
End Set
End Property
Public Property Js_OnChange() As String
Get
Return _Js_onChange
End Get
Set(ByVal Value As String)
_Js_onChange = Value
End Set
End Property
Public Property LableText() As String
Get
Return _LableText
End Get
Set(ByVal Value As String)
_LableText = Value
End Set
End Property
Public Property LableWidth() As Integer
Get
Return _LableWidth
End Get
Set(ByVal Value As Integer)
_LableWidth = Value
End Set
End Property
Public Property LableClass() As String
Get
Return _LableClass
End Get
Set(ByVal Value As String)
_LableClass = Value
End Set
End Property
Public Property SelectedValue() As String
Get


Return _SelectedValue
End Get
Set(ByVal Value As String)
_SelectedValue = Value
End Set
End Property

Protected Overrides Sub Render(ByVal Output As System.Web.UI.HtmlTextWriter)

Dim iWidth As Integer = MyBase.Width.Value
If iWidth = 0 Then
iWidth = 102
'MyBase.Width = Unit.Parse("102px")
End If

Dim sWidth As Integer = iWidth + 16
Dim spanWidth As Integer = sWidth - 18

Output.Write("<div style=""POSITION:relative;float:left"">")
If _LableClass <> "" Then Output.Write("<span class=""" & _LableClass & """>")
If _LableText <> "" Then Output.Write(_LableText & " ")
If _LableClass <> "" Then Output.Write("</span>")
Output.Write("<span style=""MARGIN-LEFT:" & spanWidth & "px;OVERFLOW:hidden;WIDTH:18px"">")

_DropDownList.ID = _DropDownListName
_DropDownList.Width = Unit.Parse(sWidth & "px")
_DropDownList.Style.Add("MARGIN-LEFT", "-" & spanWidth & "px")
If _SelectType = 1 Then
_DropDownList.Attributes.Add("onchange", "this.parentNode.nextSibling.value=this.options[this.selectedIndex].text;" & _Js_onChange)
Else
_DropDownList.Attributes.Add("onchange", "this.parentNode.nextSibling.value=this.value;" & _Js_onChange)
End If

Dim item As ListItem = New ListItem
item.Value = ""
item.Text = " "
_DropDownList.Items.Add(item)
If _values.Rows.Count > 0 Then
For Each row As DataRow In _values.Rows
item = New ListItem
item.Text = row("text").ToString()
item.Value = row("value").ToString()
_DropDownList.Items.Add(item)
Next
Try
_DropDownList.SelectedValue = _SelectedValue
Catch
_DropDownList.SelectedIndex = 1
End Try
End If
_DropDownList.RenderControl(Output)

Output.Write("</span>")

MyBase.Style.Clear()
MyBase.Width = Unit.Parse(iWidth - 10 & "px")
MyBase.Style.Add("border-width", "0px")
MyBase.Style.Add("left", _LableWidth + 2 & "px")
MyBase.Style.Add("top", "2px")
MyBase.Style.Add("POSITION", "absolute")

MyBase.Render(Output)

Output.Write("</div>")
End Sub

End Class

End Namespace

读书人网 >asp.net

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net