Products
GG网络技术分享 2025-03-18 16:14 3
我们熟悉的标准HTML输入控件包括input,select,textarea等；比如通过改变input的value属性值，就可输入内容到文本输入框中。
有些网页表单为了实现特殊的效果和功能，可以不使用这些控件，通过客户端脚本生成特殊的输入方式。手工填表不受影响，如果自动填表就需要使用特殊的方式。
非标准下拉列表框填写示例.png
方法一：手工填表后，观察源码变化，发现填写的内容出现在<span>a5</span>元素中。那么我们填表的思路就是直接修改这个元素的值。获取span元素，“填写”它的text文本内容为a3，可以看到网页也对应的发生变化。但提交表单时，如果是非input元素，可能无法提交填写的值，需进一步测试。
方案二：使用自动点击操作，完全跟人工填表步骤一样，先点击下拉箭头，等待0.1秒，然后在选项中点击对就的选项元素。几乎所有下拉列表控件都可以用这种方法填写。
在我们的分类管理中，我们要能够去修改我们的分类信息，当我们点击修改的时候，可以跳转到一个能编辑的页面，这里面能够修改分类的名称、分类的描述、以及分类的商品。
技术分析
| ondblclick=\"selectOne()\"//双击事件 multiple=\"multiple\"//select标签的属性 |
代码实现：
| <!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"> <title></title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. selectOne要做一些操作 (将左边选中的元素移动到右边的select中) 1. 获取左边Select中被选中的元素 2. 将选中的元素添加到右边的Select中就可以 --> <script> function selectOne(){// 1. 获取左边Select中被选中的元素 var leftSelect = document.getElementById(\"leftSelect\"); var options = leftSelect.options; //找到右侧的Select var rightSelect = document.getElementById(\"rightSelect\"); //遍历找出被选中的option for(var i=0; i < options.length; i++){ var option1 = options[i]; if(option1.selected){ // 2. 将选中的元素添加到右边的Select中就可以 rightSelect.appendChild(option1); } } } //将左边所有的商品移动到右边 function selectAll(){// 1. 获取左边Select中被选中的元素 var leftSelect = document.getElementById(\"leftSelect\"); var options = leftSelect.options; //找到右侧的Select var rightSelect = document.getElementById(\"rightSelect\"); //遍历找出被选中的option for(var i=options.length - 1; i >=0; i--){ var option1 = options[i]; rightSelect.appendChild(option1); } } </script> </head> |
| <body> <table border=\"1px\" width=\"400px\"> <tr> <td>分类名称</td> <td><input type=\"text\" value=\"手机数码\"/></td> </tr> <tr> <td>分类描述</td> <td><input type=\"text\" value=\"这里面都是手机数码\"/></td> </tr> <tr> <td>分类商品</td> <td> <!--左边--> <div style=\"float: left;\"> 已有商品<br /> <select multiple=\"multiple\" id=\"leftSelect\" ondblclick=\"selectOne()\"> <option>华为</option> <option>小米</option> <option>锤子</option> <option>oppo</option> </select> <br /> <a href=\"#\" onclick=\"selectOne()\"> >> </a> <br /> <a href=\"#\" onclick=\"selectAll()\"> >>> </a> </div> <!--右边--> <div style=\"float: right;\"> 未有商品<br /> <select multiple=\"multiple\" id=\"rightSelect\"> <option>苹果6</option> <option>肾7</option> <option>诺基亚</option> <option>波导</option> </select> <br /> <a href=\"#\"> << </a> <br /> <a href=\"#\"> <<< </a> </div> </td> </tr> <tr> <td colspan=\"2\"> <input type=\"submit\" value=\"提交\"/> </td> </tr> </table> </body></html> |
以上就是如何利用js来控制下拉列表左右选择的详细内容，更多请关注网站的其它相关文章！
Demand feedback
