前端（jsp+js）

一：功能描述：点击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是在超过设置的长度后自动实现滚动条