求助：可输入下拉框位置问题

Question

注意div会有换行，改成span就不会了
<table border='1' width='100%' cellspacing='1' cellpadding='1' align='center'>
<tr>
<td style="padding-left:200px;"><span>
<input id="Text1" type="text" style=" z-index:19; width:expression(nextSibling.firstChild.clientWidth - 17); " value="Combox test1"  /><span style="position:relative;top:0px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;background:red;">
<select id="Select1" style="position:relative;left:expression(19-this.clientWidth);"   onpropertychange="this.parentNode.previousSibling.value = this.options[this.selectedIndex].innerText;"><option>&iquest;&Eacute;&Ecirc;&auml;&Egrave;&euml;Combox</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</span>
</table>

Answer 1

恩。。原来我也是想把DIV换成SPAN，但是这样会造成SELECT的错位，position:relative;top:-22px;这个可以控制上下的错位，现在 hbhbhbhbhb1021(天外水火(我要多努力))修改后，SELECT的宽度和INPUT不一致。如何解决呢？我尝试下。。有朋友解决的，请贴出来。：）

Answer 2

http://www.never-online.net/code/simulateSelect/

Answer 3

http://www.never-online.net/code/simulateSelect/
这个调试通过，可以抽出来，但是和原有系统风格相差太大。由于时间的关系，无法对其做太多的改动，<table border='1' width='100%' cellspacing='1' cellpadding='1' align='center'>
<tr>
<td style="padding-left:200px;"><span>
<input id="Text1" type="text" style=" z-index:19; width:expression(nextSibling.firstChild.clientWidth - 17); " value="Combox test1"  /><span style="position:relative;top:0px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;background:red;">
<select id="Select1" style="position:relative;left:expression(19-this.clientWidth);"   onpropertychange="this.parentNode.previousSibling.value = this.options[this.selectedIndex].innerText;"><option>&iquest;&Eacute;&Ecirc;&auml;&Egrave;&euml;Combox</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</span>
</table>
这个能否帮调整下，使之能够使用。

Answer 4

地址改了一下，呵呵
http://www.never-online.net/code/neverModules/simulateSelect/

Answer 5

哎。。没人，把两个的长度写死算咯。
<table border='1' width='100%' cellspacing='1' cellpadding='1' align='center'>
<tr>
<td><span>
<input id="Text1" type="text" style="z-index:19;width:200px;" value=""><span style="position:relative;top:0px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;">
<select id="Select1" style="position:relative;left:expression(18-this.clientWidth);" onpropertychange="this.parentNode.previousSibling.value = this.options[this.selectedIndex].innerText;" style="width:219px">
<option>Combox test1</option>
<option>1</option>
</select>
</span>
</span>
</table>
下班6:00结贴。

Answer 6

不爽。。解决这个问题。。然后用AJAX来改变span的innerHTML，位置严重错位。

Answer 7

呵呵。。谢。我的设计是这样的，在一个可输入下拉框中输入文字，然后改变可输入下拉框的option，我是准备使用AJAX的东西来改变。。：）
谢。看看明天能否解决。然后用AJAX来改变span的innerHTML，位置严重错位的问题，我另外开贴给分吧。

Answer 8

晕哦。。用阿信的也一样。改变span的innerHTML的位置会发生变化。。我晕。

Answer 9

是这样？
<table border='1' width='100%' cellspacing='1' cellpadding='1' align='center'>
<tr>
<td style="padding-left:200px;"><span>
<input id="tx" type="text" style=" z-index:19;" value="Combox test1"  /><span style="position:relative;top:0px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;background:red;">
<select id="sel" style="position:relative;left:expression(19-this.clientWidth);"   onpropertychange="this.parentNode.previousSibling.value = this.options[this.selectedIndex].innerText;"><option>Combox</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
</span>
</table>
<script type="text/javascript">
//<![CDATA[
  var $ = document.getElementById; var WIDTH=18;
  var l1 = $("tx"); var l2 = $("sel");
  l1.style.width = l2.offsetWidth-WIDTH+'px';
//]]>
</script>

Answer 10

http://www.never-online.net/code/neverModules/simulateSelect/
这个调试通过，可以抽出来，但是和原有系统风格相差太大。由于时间的关系，无法对其做太多的改动，
-------------
改动一下CSS就可以了，全部都可以由CSS来控制的。

Answer 11

hoho 楼主这个功能本来我也要做后来觉得可能时间要花太长..结果改为一个页面既放text又放select..

Answer 12

对了 为什么不在text里接受值改变的信息 然后将这个值来改变option?好象这样更简单<table border='1' width='100%' cellspacing='1' cellpadding='1' align='center'>
<tr>
<td>
<span>
<input id="Text1" type="text" style="z-index:19;width:200px;" value="" onpropertychange="document.all.Select1.options[flag].innerText=this.value"><span style="position:relative;top:0px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;">
<select id="Select1" style="position:relative;left:expression(18-this.clientWidth);" onpropertychange="setValue(this.selectedIndex);this.parentNode.previousSibling.value = this.options[this.selectedIndex].innerText;" style="width:219px">
<option>Combox test1</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</span>
</span>
</table>
<br><script>
var flag;
function setValue(f)
{
flag = f;
}
</script>

Answer 13

最终结合阿信的代码，以及在网上找到的资料，及以上朋友的代码结合修改后：
<body topmargin='0' background='../images/bg2.gif' onload="Init()">
<form name="frm" onsubmit="javascript:return(frm_submit());" action="">
          <td class='bgn6' width='38%'>&nbsp;<input type='hidden' name='txtAdUserID' size='20' class='f1' value=''><input name='txtAdUserName' type="text" class='f1' size='20' style="z-index:19;" value="" onkeyup="SelectTip()"><span id='spanAdUserName' style="position:relative;top:1px;left:expression(this.firstChild.clientWidth - 19); width:19px; text-align:right; overflow:hidden; z-index:8;">
<select id="sAdUserName" style="position:relative;left:expression(19-this.clientWidth);" onchange="frm.txtAdUserName.value=options[selectedIndex].text;" style="width:150px" class='f1'>
<option value=''>请选择

<option value='测试名字'>测试名字
<option value='商务快车泉州代理'>商务快车泉州代理
<option value='测试名字aaa'>测试名字aaa
<option value='财务会计'>财务会计
</select></span></td>
<script language="javascript">
var TempArr=[];//存贮option function Init(){
var SelectObj=document.frm.elements["sAdUserName"]
/*先将数据存入数组*/
with(SelectObj)
for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]
}
function SelectTip(){
var TxtObj=document.frm.elements["txtAdUserName"]
var SelectObj=document.getElementById("spanAdUserName")
var Arr=[]
document.frm.sAdUserName.length = 0;
document.frm.sAdUserName.options[0] = new Option('请选择','');
for(i=0;i<TempArr.length;i++){
//if(TempArr[i][0].indexOf(TxtObj.value)==0) //若找到以txt的内容开头的，添option。
if(TempArr[i][0].indexOf(TxtObj.value)>=0) //若找有txt的内容，添option。
document.frm.sAdUserName.options[document.frm.sAdUserName.length] = new Option(TempArr[i][1],TempArr[i][0]);
}
}
</script>
</form>