1. select操作方法
1.判断select选项中是否存在Value="paraValue"的Item
2.向select选项中 加入一个Item
3.从select选项中 删除一个Item
4.修改select选项中 value="paraValue"的text为"paraText"
5.设置select中text="paraText"的第一个Item为选中
6.设置select中value="paraValue"的Item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的Index
10.清空select的项
-------------------------------------------
//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
isExit = true;
break;
}
}
return isExit;
}
//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
alert("该Item的Value值已经存在");
}
else
{
var varItem = new Option(objItemText,objItemValue);
// objSelect.options[objSelect.options.length] = varItem;
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}
else
{
alert("该select中 不存在该项");
}
}
//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}
else
{
alert("该select中 不存在该项");
}
}
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}
//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;
//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;
//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;
//10.清空select的项
// document.all.objSelect.options.length = 0;
2. 使select中某一项被选中
<HTML>
<HEAD>
<TITLE>SelectItem</TITLE>
<script type="text/javascript">
function selectItem(selectIndex){
//获取select元素对象
var tagSelect = document.getElementByIdx("select1");
//方式一：使用select元素的selectedIndex属性，selectedIndex是设置或获取选中选项(<option>)位于 select 对象中的位置
tagSelect.selectedIndex = selectIndex;
/*方式二：使用select元素的options集合，options代表select元素中的所有<option>子标记，
如果需要访问options集合中的第二个option时，可以通过options[1]的方式访问；
还有tagSelect.options.length可以返回options的个数 */
//tagSelect.options[selectIndex].selected = true;
}
</script>
</HEAD>
<BODY>
<form name="form1">
<select name="select1">
<option id="s1" value="s1">选项1</option>
<option id="s2" value="s2">选项2</option>
<option id="s3" value="s3">选项3</option>
</select>
<input type=button value="选择第二个" οnclick="selectItem(1)">
</form>
</BODY>
</HTML>
3. 获取多行select中被选中的项的文本
使用下面js函数
<script>
function gettext()
{
var text="";
var obj=document.all.aa;
for(var i=0;i<obj.length;i++)
{
if (obj.options[i].selected)
text=text + obj.options[i].text + ",";
}
text=text.substring(0,text.length-1);
alert (text);
}
</script>
<select id = aa name = aa multiple>
<option value = 1>a</option>
<option value = 2>b</option>
<option value = 3>c</option>
<option value = 4>d</option>
<option value = 5>e</option>
</select>
<input type = button id = ok name = ok value = "确定" οnclick="gettext()"></input>
4. 通过Select向Input赋值的几种方法
以下是我在实际制作表单中的一些总结,虽然都是小CASE，但还是比较实用的，注意灵活运用!
1.将Select的值直接赋给Input
<form name="formname">
<input name="inputname" type="text" value="" size="20" />
<select name="selectname" οnchange="document.formname.inputname.value=this.value">
<option value="value0">value0</option>
<option value="value1">value1</option>
<option value="value2">value3</option>
</select>
</form>
2.将Select的值赋给两个Input
因为Select的一个Option值只有一个，因此在生成Select时需要用JS进行分割一下
<script type="text/javascript">
function Change2Input (objSelect,objInput1,objInput2){
if (!objInput1) return;
if (!objInput2) return;
var str = objSelect.value;
var arr = str.split(",");
objInput1.value=arr[0]
objInput2.value=arr[1]
}
</script>
<form name="formname">
<input name="input1name" type="text" value="" size="20" />
<input name="input2name" type="text" value="" size="20" />
<select name="selectname" οnchange="javascript:Change2Input(this,document.formname.input1name,document.formname.input2name)">
<option value="站长吧,http://master8.net">站长吧</option>
<option value="phpcms,http://phpcms.cn">phpcms</option>
</select>
</form>
拿上例来说，就可以把网站名和URL分别赋值给两个Input
3.将Select的值用逗号分割赋给Input
最简单的不做任何处理的是:
<form name="formname">
<input name="inputname" type="text" value="" size="20" />
<select name="selectname" οnchange="document.formname.inputname.focus(); document.formname.inputname.value = document.formname.inputname.value + this.options[this.selectedIndex].value + ",";">
<option value="value0">value0</option>
<option value="value1">value1</option>
<option value="value2">value3</option>
</select>
</form>
以下是经过处理的，规则是同一Value只能出现一次，且结尾不要加逗号
<script type="text/javascript">
function ChangeInput (objSelect,objInput){
if (!objInput) return;
var str = objInput.value;
var arr = str.split(",");
for (var i=0; i<arr.length; i++){
if(objSelect.value==arr[i])return;
}
if(objInput.value=='' || objInput.value==0 || objSelect.value==0){
objInput.value=objSelect.value
}else{
objInput.value+=','+objSelect.value
}
}
</script>
<form name="formname">
<input name="inputname" type="text" value="" size="20" />
<select name="selectname" οnchange="javascript:ChangeInput(this,document.formname.inputname)">
<option value="value0">value0</option>
<option value="value1">value1</option>
<option value="value2">value3</option>
</select>
</form>
5. 通过id号获得表单元素
function getElementById(){
document.getElementByIdx("queryScript").src="<%=request.getContextPath()%>/webcontroller?functionId=1002;
var td = document.getElementByIdx("menu1");
td.innerHTML=" 国保支队";
}
6. 响应回车事件
οnkeydοwn="if(event.keyCode==13)sqlQuery(2)"
屏蔽form默认的onkeyDown事件
方法1：<Input ….οnkeydοwn="if(event.keyCode==13)event.keyCode=9">
方法2：<form name="myform" onKeydown="if(event.keyCode==13){return false;}">
7. 屏幕滚动效果
<MARQUEE οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=3 scrollDelay=0 direction=up width="90%" height=100>
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td>·1</td>
<td>·2</td>
</tr>
</table>
</MARQUEE>
8. 当前页是一个弹出窗口，想刷新父页面
window.opener.location.reload()
9. 弹出窗口刷新它的父页面后。出现不重新发送信息，则无法刷新网页（如果父窗口在此之前如果有过提交数据的动作，则会出现这么个讨厌的对话筐“不重新发送信息，则无法刷新网页”）
window.opener.location.href=window.opener.location.href
去刷新（其实是重定位了一下）父窗口
window.opener.location.reload();
10. 让网页自动更新，使用response的Refresh标头
例1：每隔3分钟，重新加载此网页
Response.setIntHeader(“Refresh”,180);
例2：过10秒钟后，调用浏览器转到http://Server/Path的网页时
Response.setHeader(“Refresh”,”10;URL=http://Server/Path”);
Html语法中也有类似的功能：
<meta http-equiv=”refresh” content=” 10;URL=http://Server/Path”>
11. document.all获得文档中所有组件
用法：<IMG src="images/aa.jpg" name="ntimg" style="border:1px #ff0000 solid" >
<a href=# onClick="document.all.ntimg.src = 'images/bb.JPG' ">yyyyyy换图yyyyyy</a>
12. 表单输入限制（小结）
只能输入汉字：
<input οnkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))">
只能输入数字：
<input οnkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
只能输入英文和数字：
<input οnkeyup="value=value.replace(/[/W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
function bufferfx(){
if(!isInt(document.myform.bufferR.value)){//判断不是整数
alert("请输入一个整数！");
return false;
}
//判断输入的字符串是否为数字
function isInt(strInt)
{
var num;
num = parseInt(strInt);
if (isNaN(num))
{
return false;
}
return true;
}
输入框最大输入长度和特殊字符控制
<input type=text name=txt size="15" οnkeypress="forbid()" maxLength="10">
<script language=javascript>
function forbid(){
if ((event.keyCode > 32 && event.keyCode < 48)
|| (event.keyCode > 57 && event.keyCode < 65)
|| (event.keyCode > 90 && event.keyCode < 97)
|| (event.keyCode > 122 && event.keyCode < 127)
){
//alert("禁止输入特殊字符！");
event.returnValue = false;
}
}
</script>
13. 当您观赏一个拥有数个frame的网页时，若您想link至internet其他网页，这些frame 并不会消失。那么frame应如何消除呢？
方法：在<a href..>标记中加入target=”_top”就可解决，如：
<a href=”a.html” target=”_top”>pp</a>
若想让整个网页中的link都有此效果，可以在<head>…</head>标记中加入<base target=”_top”>，这样每个link被按下时frames都会被消除。
14. 界面跳转
<jsp:forward page=”toPage.jsp”/>
15. 重定向
方法一：对于HTML语言
| 以下是代码片段： |
对于HTML语言可以用如上方法，
以上含义为：则会在2秒之后重定向到 http://www.citk.net；如果 http://www.citk.net为本身，则每2秒自动刷新1次；如果 content=0，则立即重定向。
方法二：js实现
| 以下是代码片段： |
方法三：response实现
Response.sendRedirect(“http://www.citk.net”);
2593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
