一:功能描述:点击text实现select的实现
<script type="text/javascript">
arr = new Array("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP");
function Myselect(){
for (var i=0;i < arr.length; i++) {
document.form1.sel.options[i] = new Option(arr[i],i); }
document.getElementById("sel").style.display="";
}
</script>
<input type="text" id="text" onFocus="Myselect()" > //鼠标聚焦触发方法
<form name="form1">
<tr>
<td height="21">
<select name="sel" id="sel" style="display:none"> //隐藏select
</select>
</td>
</tr>
</form>
</tr>
</body>
注:onkeyup:键盘按下抬起; onkeydown:键盘按下
Onclick :点击 ;onmousedown, onmouseup:鼠标按键按下,抬起
Mouseover:鼠标移开
2:将数组中的元素以li 的形式显示
var list="";
for (var i=0;i<res.length;i++)
{
list +="<li>"+res[i]+"</li>";
}
document.getElementById("showModelno").innerHTML = list;
//innerHTML注意拼写正确
3:获取列表点击的值
Var obj_lis=document.getElementById("showModelno").getElementsByTagName("li"); //通过ul的ID找下面的li
for(i=0;i<obj_lis.length;i++){
obj_lis[i].onclick = function(){
document.getElementById("text").value=this.innerHTML //id为text的显示值
}}
4:将选择的select的option的值赋值给text
<script type="text/javascript">
document.getElementById("modelNo").οnchange=function(){ //select点击触发事件
document.getElementById("selectModelNo").value=this.options[this.options.selectedIndex].text;
//text为select的显示值;value为select的隐藏值
document.getElementById("selectModelNo").name=this.options[this.options.selectedIndex].value;
}
</script>
5:已知select的option的text值,求对应的option的value
var modelSelect=document.getElementById("modelNo"); //select
for(var i=0;i<modelSelect.options.length ;i++){
if(modelSelect.options[i].text==document.getElementById("selectModelNo").value) { return document.getElementById("modelNo").options[i].value;
}
}
6:在js中设置控件的隐藏、显示
隐藏:
document.getElementById("showModelno").style.display="none";
显示:
document.getElementById("showModelno").style.display="";
设置div显示后不改变其他控件的位置:
style=" height: XXpx;font-size: XXpx;overflow: auto;width: XXpx;
background-color: white;top: 172px;left: 114px;position: absolute ;display:none"
注:设置position为absolute并设置他的left和top,决定他的位置。Overflow:auto是在超过设置的长度后自动实现滚动条