JS+CSS实现实用的单击输入框弹出选择框的方法.docx

JS+CSS 实现实用的单击输入框弹出选择框的方法 本文主要介绍了使用 JS+CSS 实现单击输入框弹出选择框的方法，通过实例分析了 JavaScript 操作 select 及 button 的操作技巧，具有肯定参考借鉴价值。 我们来了解一下技术背景，JS+CSS 是现在网站开发中最常用的技术，使用 JS+CSS 可以实现丰富的交互效果，使网站变得更加生动活泼。但是，单击输入框弹出选择框的方法却是一个常见的问题，本文将详细介绍如何使用 JS+CSS 实现这种效果。 下面是实现方法的详细介绍： 我们需要在 HTML 文件中添加一个输入框和一个选择框，输入框用于输入值，选择框用于显示选择结果。然后，我们需要使用 JavaScript 实现选择框的弹出效果。 在 CSS 文件中，我们需要添加以下样式： ``` .black_overlay{ display:none; position:absolute; top:0%; left:0%; width:100%; height:100%; background-color:#FFFFFF; z-index:1001; -moz-opacity:0.8; opacity:.80; filter:alpha(opacity=80); } .white_content{ display:none; position:absolute; top:25%; left:25%; width:50%; height:50%; padding:16px; border:16px solid orange; margin:-32px; background-color:white; z-index:1002; overflow:auto; } ``` 这些样式将用于实现弹出选择框的效果。 在 JavaScript 文件中，我们需要添加以下代码： ``` function moveselect(obj,target,all){ if (!all) all=0 if (obj!="[object]") obj=eval("document.all."+obj) target=eval("document.all."+target) if (all==0){ while (obj.selectedIndex-1){ //alert(obj.selectedIndex) mot=obj.options[obj.selectedIndex].text mov=obj.options[obj.selectedIndex].value obj.remove(obj.selectedIndex) var newoption=document.createElement("OPTION"); newoption.text=mot newoption.value=mov target.add(newoption) } }else{ //alert(obj.options.length) for (i=0;i<obj.options.length;i++){ mot=obj.options[i].text mov=obj.options[i].value var newoption=document.createElement("OPTION"); newoption.text=mot newoption.value=mov target.add(newoption) } obj.options.length=0 } } function dakai(){ document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block' } function guanbi(){ //把右边 select 的值传到文本框内 var yuanGong=document.getElementById("yuanGong") yuanGong.value="" //假如不加这句，则每次选择的结果追加 var huoQu=document.getElementById("D2") for(var k=0;k<huoQu.length;k++) yuanGong.value=yuanGong.value + huoQu.options[k].value + " " document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none' } ``` 这些代码将用于实现选择框的弹出效果和选择结果的传递。 本文详细介绍了使用 JS+CSS 实现单击输入框弹出选择框的方法，通过实例分析了 JavaScript 操作 select 及 button 的操作技巧，具有肯定参考借鉴价值。