|
文章介：获取select被选中的文本Qselect下拉框的W二个元素ؓ当前选中|radio单选组的第二个元素为当前选中|获取|文本框，文本区域Q?("#txt").attr("value")Q多选框checkboxQ?("#checkbox_id").attr("value")Q单选组radioQ?$("input[@type=radio][@checked]").val();下拉框selectQ?$('#sel').val(); …? var item = $('input[@name=items][@checked]').val();
var item = $("select[@name=items] option[@selected]").text();
$('#select_id')[0].selectedIndex = 1;
$('input[@name=items]').get(1).checked = true;
文本框，文本区域Q?("#txt").attr("value")Q?/p> 多选框checkboxQ?("#checkbox_id").attr("value")Q?/p> 单选组radioQ?$("input[@type=radio][@checked]").val(); 下拉框selectQ?$('#sel').val(); 控制表单元素Q?/p> 文本框，文本区域Q?("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容
$("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//d
$("#sel").empty()Q?/清空下拉?/p>
var item = $('input[@name=items][@checked]').val();
var item = $("select[@name=items] option[@selected]").text();
$('#select_id')[0].selectedIndex = 1;
$('input[@name=items]').get(1).checked = true;
文本框，文本区域Q?("#txt").attr("value")Q?/p>
文本框，文本区域Q?("#txt").attr("value",'');//清空内容
|
]]>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Human()
{
this.i=3;
}
function test()
{
alert(Human.i+",1");
alert(new Human().i+",2");
alert(ff.test1+",3");
alert(ff.test2+",4");
alert(ff.test3+",5");
}
//用alert(Human.i)居然讉K不到
//?alert(new Human().i)则可?
function f()
{
this.test1=1;
}
f.test2=2;
f.prototype.test3=3;
ff= new f();
//-->
</SCRIPT>
</HEAD>
<BODY>
<script>test()</script>
</BODY>
</HTML>
l果 alert(1,3)取不到?/p>
推荐圈子: GT-Grid
更多相关推荐 DWR 处理各种form表单Select/option,table
util.js包含一些有用的函数function,用于在客L面调用.
主要功能如下Q?
代码
1?() 获得面参数?
2、addOptions and removeAllOptions 初始化下拉框
3、addRows and removeAllRows 填充表格
4、getText 取得text属性?
5、getValue 取得form表单?
6、getValues 取得form多个?
7、onReturn
8、selectRange
9、setValue
10、setValues
11、toDescriptiveString
12、useLoadingMessage
13、Submission box
代码
1?()函数
IE5.0 不支?
$ = document.getElementById
取得form表单?
var name = $("name");
代码
a、如果你惛_更新select Ӟ想保存原来的数据Q即在原来的select中添加新的optionQ?
var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id,...);
DWRUtil.setValue(id,sel);
demo:比如你想d一个optionQ?-请选择--?
DWRUtil.addOptions(id,["--请选择--"]);
DWRUtil.addOptions()?中方式：
代码
@ Simple Array Example: 单数l?
例如:
Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]Q?
DWRUtil.addOptions("demo1",array);
代码
@ Simple Object Array Example 单数l?元素为beans
q种情况?你需要指定要昄 beans ?property 以及 对应?bean ?
例如:
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
DWRUtil.addOptions("demo2",array,'id','name');
其中id指向及bean的id属性，在optiong中对应valueQname指向bean的name属性，对应下拉框中昄的哪个?
代码
@ Advanced Object Array Example 基本同上
DWRUtil.addOptions( "demo3",
[{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'AU' },
{ name:'Europe', id:'EU' }
],'id','name');
代码
@ Map Example 用制定的map来填?options:
如果 server q回 Map,呢么q样处理卛_Q?
DWRUtil.addOptions( "demo3",map);
其中 value 对应 map keysQtext 对应 map valuesQ?
代码
@ <ul> and <ol> list editing
DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>?lt;ol>q样的heml元素
3、addRows and removeAllRows 填充表格
DWR 提供2个函数来操作 tableQ?
----------------------------
DWRUtil.addRows(); d?
----------------------------
DWRUtil.removeAllRows(id); 删除指定id的table
----------------------------
下面着重看一?addRows() 函数Q?
DWRUtil.addRows(id, array, cellfuncs, [options]);
其中id 对应 table ?id(更适合tbodyeQ推荐?tbodye)
array 是server端服务器的返回|比如listQmap{等
cellfuncs 及用q回值来天春表格
[options] 用来讄表格样式Q它?个内部函数来讄单元格样?rowCreator、cellCreator)?
比如: server端返回listQ而list中存攄是下面这?beanQ?
代码
public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
}
下面?DWRUtil.addRows();
代码
function userList(data){
//var delButton = "<input type='button'/>";
//var editButton = "<input type='button'/>";
var cellfuncs = [
function(data){return data.id;},
function(data){return data.userName;},
function(data){return data.userTrueName;},
function(data){return data.birthday;},
function(data){
var idd = data.id;
var delButton = document.createElement("<INPUT TYPE='button' onclick='delPerson("+ idd +")'>");
delButton.setAttribute("id","delete");
delButton.setAttribute("value","delete");
return delButton;
},
function(data){
var idd = data.id;
var editButton = document.createElement("<INPUT TYPE='button' onclick='editPerson("+ idd +")'>");
editButton.setAttribute("name","edit");
editButton.setAttribute("value","edit");
return editButton;
}
];
DWRUtil.removeAllRows('tabId');
DWRUtil.addRows('tabId', data,cellfuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
var index = options.rowIndex * 50;
row.setAttribute("id",options.rowData.id);
row.style.collapse = "separate";
row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
var index = 255 - (options.rowIndex * 50);
//td.style.backgroundColor = "rgb(" + index + ",255,255)";
td.style.backgroundColor = "menu";
td.style.fontWeight = "bold";
td.style.align = "center";
return td;
}
});
document.getElementById("bt").style.display = "none";
}
4、getText 取得text属性?
DWRUtil.getText(id): 用来获得 option 中的文本
比如Q?
代码
<select id="select">
<option value="1"> Ҏ </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
</select>
调用 DWRUtil.getText("select"); 返?"香蕉" 字段Q?
DWRUtil.getText(id)Q仅仅是用来获得 select 文本|其他不适用?
5、DWRUtil.getValue(id): 用来获得 form 表单?
有如下几U情况：
代码
Text area (id="textarea"): DWRUtil.getValue("textarea")返?Text area的?
Selection list (id="select"): DWRUtil.getValue("select") 返?Selection list 的?
Text input (id="text"): DWRUtil.getValue("text") 返?Text input 的?
Password input (id="password"): DWRUtil.getValue("text") 返?Password input 的?
Form button (id="formbutton"): DWRUtil.getValue("formbutton") 返?Form button 的?
Fancy button (id="button"): DWRUtil.getValue("formbutton") 返?Fancy button 的?
6、getValues 取得form多个?
扚w获得面表单的?l合成数l的形式,q回 name/value;
例如: form():
代码
<input type="textarea" id="textarea" value="1111"/>
<input type="text" id="text" value="2222"/>
<input type="password" id= "password" value="3333"/>
<select id="select">
<option value="1"> Ҏ </option>
<option value="4444" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
</select>
<input type="button" id="button" value="5555"/>
那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})
返?^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}
7、DWRUtil.onReturn 防止当在文本框中输入后，直接按回车就提交表单?
<input type="text" onkeypress="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()"/>
8、DWRUtil.selectRange(ele, start, end);
在一个input box里选一个范?
代码
DWRUtil.selectRange("sel-test", $("start").value, $("end").value);
比如:<input type="text" id="sel-test" value="012345678901234567890">
DWRUtil.selectRange("sel-test", 2, 15);
9、DWRUtil.setValue(id,value);
为指定的id元素,讄一个新?
10、DWRUtil.setValues({
name: "fzfx88",
password: "1234567890"
}
); 同上,扚w更新表单?
/***********************************************************************/
11、DWRUtil.toDescriptiveString()
带debug信息的toStringQ第一个ؓ要debug的对象，W二个参Cؓ处理{。等U如下：
0: Single line of debug 单行调试
1: Multi-line debug that does not dig into child objects 不分析子元素的多行调?
2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到W二层子元素的多行调?
<input type="text" id="text">
DWRUtil。toDescriptiveString("text",0);
/******************************************************************************/
12、DWRUtil.useLoadingMessage();
当发出ajaxh?面昄的提C等待信?
代码
function searchUser(){
var loadinfo = "loading....."
try{
regUser.queryAllUser(userList);
DWRUtil.useLoadingMessage(loadinfo);
}catch(e){
}
}
]]>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新徏|页 1</title>
<script language="javascript">
<!--
var inputItem; // 输入框句?br />var g_activeItem; // 保存正在~辑的单元格
function changeToText(obj)
{
if( obj && inputItem )
{
// 如果存在正在~辑的单元格Q?则取消编辑状态， q将~辑的数据保存v?br /> var str = " ";
if(inputItem.value != "")
{
str = inputItem.value;
}
obj.innerText = str;
}
}
function changeToEdit(obj)
{
if( !inputItem )
{
inputItem = document.createElement('input');
inputItem.type = 'text';
inputItem.style.width = '100%';
inputItem.style.height = '18px';
inputItem.style.fontSize = '12px';
}
inputItem.style.display = '';
inputItem.value = obj.innerText; // 该单元格的数据文本d控g?br /> obj.innerHTML = ''; // 清空单元格的数据
obj.appendChild(inputItem);
inputItem.focus();
g_activeItem = obj;
}
document.attachEvent('ondblclick',function()
{
if (event.srcElement.tagName.toLowerCase() == "td")
{
if( !inputItem )
{
inputItem = document.createElement('input');
inputItem.type = 'text';
inputItem.style.width = '100%';
inputItem.style.height = '18px';
inputItem.style.fontSize = '12px';
}
changeToText()
changeToEdit(event.srcElement);
} else
{
event.returnValue = false;
return false;
}
});
document.attachEvent('onclick', function()
{
if( event.srcElement.parentNode == g_activeItem || event.srcElement == g_activeItem )
{
return;
} else
{
changeToText(g_activeItem);
}
});
//-->
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 24px}
-->
</style>
</head>
<body>
<table border="0" width="100%" id="table1">
<tr>
<td colspan="5" align="center" valign="middle"><span class="STYLE1">Test </span></td>
</tr>
<tr>
<td width="130"> </td>
<td width="130"> </td>
<td width="130"> </td>
<td width="130"> </td>
<td width="130"> </td>
</tr>
</table>
</body></html>
]]>
{
var expire = "";
if(expires != null)
{
expire = new Date((new Date()).getTime() + expires * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
]]>
function MyObject(name, size)
{
this.name = name;
this.size = size;
}
之后Q你可以方便的通过 MyObject cȝ prototype 属性来方便的扩充它。比如，你可以给他添加其他的属性和Ҏ?/span>
MyObject.prototype.tellSize = function()
{
return "size of "+this.name+" is "+this.size;
}
MyObject.prototype.color = "red";
MyObject.prototype.tellColor = function()
{
return "color of "+this.name+" is "+this.color;
}
var myobj1 = new MyObject("tiddles", "7.5 meters");
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
你可以想象，当你调用 tellColor() Ҏ后，l果是这LQ?/span>
color of tiddles is red
很方便的是， prototype 属性可以动态添加。比如，你需要往 MyObject 中加入一?/span> height 属性，q希望其提供一?/span> tellHeight() Ҏ来获?/span> height 属性的倹{你可以在上面的代码后，l箋d如下的代码：
MyObject.prototype.height = "2.26 meters";
MyObject.prototype.tellHeight = function()
{
return "height of "+this.name+" is "+this.height;
}
之后Q你可以讉K一?/span> myobj1 ?/span> tellHeight() ҎQ你可以得到如下的结果：
height of tiddles is 2.26 meters
prototype 的这些动态的Ҏ看h有些qhQ不q我倒是反而觉得有些凉飕飕的。确实，q些Ҏ给你很大的灉|性，可以l与?/span> runtime 改变cd性和Ҏ的能力。不q，E微发掘一下，会有些不良的习惯产生?/span>
首先Q如果可以动态添加属性和ҎQ那么很Ҏ让h惛_Q当我调用时Q我惌调用的属性或者方法存在不Q这是一个很严肃的问题，如果当我们调用时Ҏ没有该属性或者方法，可能导致我们的脚本 down 掉?/span>
不过也有
if (myobj1.tellHeight)
{
domDiv.innerHTML += myobj1.tellHeight()+"<br /><br />";
}
注意Q一定要?/span> if 语句中，不要加方法后面的那对 () Q否则，直接?/span> down 掉了。有兴趣的读者可以打C下，看看分别讉K myobj1.tellHeight ?/span> myobj1.tellHeight() 时有什么区别?/span>
也许Q你觉得q个是小意思。加个判断嘛Q不好了？
对，但是下面一个问题更令h头痛?/span>
属性和Ҏ在不在的问题单，可是属性和Ҏ变不变化的问题可׃重了。在不在我们可以，变不变呢Q比如，L下面的代码：
function MyObject(name, size)
{
this.name = name;
this.size = size;
}
MyObject.prototype.color = "red";
MyObject.prototype.tellColor = function()
{
return "color of "+this.name+" is "+this.color;
}
var myobj1 = new MyObject("tiddles", "7.5 meters");
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
MyObject.prototype.color = "green";
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
该代码将产生如下l果Q?/span>
color of tiddles is red
color of tiddles is green
h意，你修改的是类
MyObject
?/span>
color
属性。但是你惊奇的看C之前实例化的对象
myobj1
的属性值竟然也变化了。天Q如果你的项目代码是多h
上面是属性，q有ҎQ?/span>
function MyObject(name, size)
{
this.name = name;
this.size = size;
}
MyObject.prototype.color = "red";
MyObject.prototype.tellColor = function()
{
return "color of "+this.name+" is "+this.color;
}
var myobj1 = new MyObject("tiddles", "7.5 meters");
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
MyObject.prototype.color = "green";
MyObject.prototype.tellColor = function()
{
return "your color of "+this.name+" is "+this.color;
}
domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";
q段代码的结果是Q?/span>
color of tiddles is red
your color of tiddles is green
哈？原来Ҏ也能变，汗！
问题来了?/span> Javascript 太灵zȝ~程方式多少让h不适应。如果整?/span> Team 的水q都比较高还可以Q没Z犯这L错误。但是，当有个毛头小伙子不知情，擅自修改c，导致所有的人的对象都发生变化，无论是属性还是方法。在 Javascript 代码变得来多?/span> Ajax 时代Q这是一个严重的问题?/span>
]]>
<script>
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;
var displayway = false;
function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY+"\nscrollleft+x:"+document.body.scrollTop+event.x);
}
function catchFlyBar(e){
var obj = getSelectorObj('test');
var objaaa = getSelectorObj('screenFront');
screenChange(objaaa);
objaaa.style.visibility="visible";
bIsCatchFlyBar = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragClickX=x-obj.offsetLeft;
dragClickY=y-obj.offsetTop;
obj.setCapture();
document.onmousemove = onmousemove1;
document.onmouseup = onmouseup1;
}
function getSelectorObj(name){
var obj;
if (document.layers){
obj = document.layers[name];
}
else if (document.all){
obj = document.all[name];
}
else if (document.getElementById){
obj = document.getElementById(name);
}
return obj;
}
function onmouseup1(){
var obj = getSelectorObj('test');
var objaaa = getSelectorObj('screenFront');
screenChange(objaaa);
objaaa.style.visibility="hidden";
bIsCatchFlyBar = false;
obj.releaseCapture();
}
function onmousemove1(){
if(bIsCatchFlyBar){
var obj = getSelectorObj('test');
obj.style.left = event.x+document.body.scrollLeft-dragClickX;
obj.style.top = event.y+document.body.scrollTop-dragClickY;
}
}
function screenChange(obj)
{
obj.style.left=0;
obj.style.top=0;
obj.style.height=document.body.scrollHeight;
obj.style.width=document.body.scrollWidth;
}
</script>
<div id="screenFront" style="position:absolute;visibility:hidden;width:100%;height:100%;background: #000000;filter:alpha(opacity=50)"></div><div id="test" style="position:absolute;left:100;top:100">
<table border=1 cellpadding=15 cellspacing=15 >
<tr><td>
<table><tr style="cursor:move" nowrap onMouseDown="catchFlyBar()"><td>Click here to show. </td></tr></table>
</div>
</td></tr>
</table>
]]>
clientX:相对于客户区域的x坐标位置Q不包括滚动条，是正文区域?
offsetxQ设|或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置?
screenX:相对于用户屏q?br /><table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY);
}
</script>
]]>
function highlightDiamondIcon(objtemp)2
{ 3
var obj = objtemp + '_arrw';4
alert(eval(obj).src);5
eval(obj).src = eval(obj).src.replace('_on','_off');6
alert(eval(obj).src);7
}8
9
IMG id=wire_prof_img 10
onmouseover="this.src=this.src.replace('_off','_on');" 11
onmouseout="this.src=this.src.replace('_on','_off');" onclick="highlightDiamondIcon('wire_prof_img');"
]]>