select里实现checkbox选择和input里边实现上下一条

共5个文件

gif：2个

js：2个

html：1个

2星需积分: 16 20 浏览量 2012-08-29 11:36:54 上传评论收藏 66KB RAR 举报

在网页设计和开发中，`select` 和 `input` 是两个非常常见的HTML元素，它们用于收集用户输入。本文将深入探讨如何在`select`中实现复选框（checkbox）选择功能，以及如何在`input`中实现上下滚动浏览条。让我们关注`select`元素。通常，`select`用于创建一个下拉菜单，用户只能从中选择一个选项。然而，如果需要实现多选功能，我们可以使用`<select multiple>`属性。这个属性使得用户可以在下拉框中选择多个选项，模拟复选框的效果。例如： ```html <select multiple> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` 在CSS中，我们可以通过自定义样式来优化用户体验，如改变选中项的高亮颜色或添加鼠标悬停效果。同时，JavaScript或jQuery可以用来监听用户的选择变化，以实现动态交互。接下来，我们来看`input`元素。通常，`input`元素与`type`属性结合使用，创建不同类型的输入框，如文本、密码、日期等。但是，`input`本身并不支持内置的滚动条。为了在`input`中实现上下滚动，我们可以考虑使用`contenteditable`属性，将其设置为`true`，这样`input`就变成了一个可编辑的区域，然后通过CSS和JavaScript来实现滚动效果。例如： ```html <input type="text" contenteditable="true" style="overflow-y: scroll; height: 100px;"> ``` 在此基础上，我们可以用JavaScript来控制滚动条的位置，或者监听键盘事件，当用户按下上/下箭头键时，自动滚动到上一行或下一行。在实际应用中，兼容性是一个关键问题。确保你的代码在各种浏览器和设备上都能正常工作非常重要。对于`select multiple`，大部分现代浏览器都支持这一特性，但老版本的IE可能需要额外处理。对于`contenteditable`的滚动效果，也需要测试不同的环境，确保其在触摸设备和非触摸设备上都有良好的表现。 `select`和`input`元素是网页表单的重要组成部分，通过合理利用它们的特性和相关技术，我们可以创造出丰富多样的用户界面。在实现`select`中的多选和`input`的滚动条功能时，需要注意代码的可维护性和跨平台兼容性，以提供最佳的用户体验。在项目中，这样的功能优化可以提高用户交互的便捷性和舒适度，从而提升整体的网站质量。

资源推荐

资源详情

资源评论

收起资源包目录

特殊的下拉框.rar （5个子文件）

特殊的下拉框

images

lb_right.gif 237B

lb_left.gif 227B

jquery-1.6.4.js 233KB

comboSelectInput.js 4KB

特殊的下拉框.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select里实现checkbox选择和input里边实现上下一条</title> <style type="text/css"> img {border-width: 0px 0px 0px 0px} select{width:100px;} .input_left{ float:left; margin-top:2px; } .input_centor{ float:left; } .input_right{ float:left; margin-top:2px; } </style> <script language="javascript"> var n=0; var info=new Array("2012083100001","2012083100002","2012083100003","2012083100004","2012083100005","2012083100006","2012083100007","2012083100008","2012083100009","2012083100010","2012083100011"); function preUp(){ if(n>0){ n=n-1; document.getElementById("show").value=info[n]; } else{ alert("已经是第一条了"); }} function nextDown(){ if(n<info.length-1){ n=n+1; document.getElementById("showId").value=info[n]; } else{ alert("已经是最后一条了"); } } document.getElementById("showId").value=info[0]; </script> </head> <body> <div style="font-size:12px; font-family:Verdana, Geneva, sans-serif;"> <table width="60%" border="0"> <tr> <td width="38%">主机 <script type="text/javascript" src="js/jquery-1.6.4.js"></script> <script type="text/javascript" src="js/comboSelectInput.js"></script> <script type="text/javascript"> function testSelectBox(textItem) { var myArray = new Array(); myArray['CMB01'] = 1; myArray['CMB02'] = 2; myArray['CMB03'] = 3; myArray['CMB04'] = 4; myArray['CMB05'] = 5; myArray['CMB06'] = 6; myArray['CMB07'] = 7; myArray['CMB08'] = 8; setSelectBox(textItem, myArray); } </script> </head> <body> <form id="mainForm"> 主机<input id="input" onClick="testSelectBox(this);" style="height: 20px; width: 100px;" /> </form> </td> <td width="28%" align="center"> <div style="text-align:center"> <div class="input_left"><a href="javascript:preUp();"><img src="images/lb_left.gif" /></a></div> <div class="input_centor"><input name="input" id="showId" type="text" value="2012083100005" /></div> <div class="input_right"><a href="javascript:nextDown();"><img src="images/lb_right.gif" /></a></div> </div> </td> </tr> </table> </div> <br /> <input type="button" value='<<' onclick="preUp()"> <input type="textbox" id="showId" value='' size=40><input name="input" id="showId" type="text" value="2012083100005" /> <input type="button" value='>>' onclick="nextDown()"> <input name="" type="checkbox" value="" /> </body> </html>

评论收藏

内容反馈