JS实现单击输入框弹出选择框效果完整实例

本文实例讲述了JS实现单击输入框弹出选择框效果的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 完整实例代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;实用的单击输入框弹出选择框效果 &lt;/title&gt; &lt;meta http-equiv="content-typ 在JavaScript编程中，实现单击输入框弹出选择框效果是一种常见的交互设计，它能够提升用户体验，让用户在输入时能够方便地从预设的选项中选取。本文将深入讲解如何利用JavaScript来创建这样一个功能。 我们需要理解HTML基础，输入框（`<input>`）通常用于用户输入文本，而选择框（`<select>`）则用于提供一组可选的选项。在HTML中，我们创建一个输入框和一个隐藏的选择框： ```html <input type="text" id="yuanGong" /> <select id="D2" style="display:none;"> <!-- 这里添加选项 --> </select> ``` 接着，我们将使用CSS来定义弹出选择框的样式，包括一个黑色半透明的覆盖层（`.black_overlay`）和一个白色的浮层（`.white_content`），这些元素在用户点击输入框时会被显示出来： ```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来处理点击事件，当用户点击输入框时，显示选择框并添加事件监听器来处理选择框的选项变化。这里，我们使用了两个函数：`dakai()`用于打开选择框，`guanbi()`用于关闭选择框并更新输入框的值： ```javascript function dakai() { document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block'; } function guanbi() { var yuanGong = document.getElementById("yuanGong"); var yuanGongname = document.getElementById("yuanGongname"); yuanGongname.value = ""; yuanGong.value = ""; // 将选择框的值合并到输入框 var huoQu = document.getElementById("D2"); for (var k = 0; k < huoQu.length; k++) { yuanGong.value = yuanGong.value + huoQu.options[k].value + " "; } } ``` 此外，`moveselect()`函数是用于在输入框和选择框之间转移选项的。这个函数接收三个参数：源对象（`obj`）、目标对象（`target`）和一个可选的全选标志（`all`）。如果`all`为真，那么所有选项都会被移动到目标对象；否则，只移动当前选中的选项： ```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) { var mot = obj.options[obj.selectedIndex].text; var 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 { for (var i = 0; i < obj.length; i++) { var mot = obj.options[i].text; var mov = obj.options[i].value; var newoption = document.createElement("OPTION"); newoption.text = mot; newoption.value = mov; target.add(newoption); } obj.options.length = 0; } } ``` 在实际应用中，可能还需要添加事件监听器来触发这些函数，例如，当用户点击输入框时调用`dakai()`，当点击遮罩层或选择完选项后调用`guanbi()`。 这个实例展示了如何利用JavaScript实现输入框和选择框之间的互动，使得用户在输入时可以方便地从一组预设选项中选取，同时将所选内容显示在输入框中。这样的设计常见于各种表单和搜索功能，提高了用户在网页上的操作效率和体验。