|
|
Posted on 2010-07-04 19:18 幻海蓝梦 阅读(658) 评论(0) 编辑 收藏 所属分类: JS
1
一基础理解:
2
3
var e
=
document.getElementById(
"
selectId
"
);
4
5
e. options
=
new
Option(
"
文本
"
,
"
值
"
) ;
6
7
//
创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>
8
9
//
options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签
10
11
1
:options[ ]数组的属性:
12
13
length属性
---------
长度属性
14
15
selectedIndex属性
--------
当前被选中的框中的文本的索引值,此索引值是内存自动分配的(
0
,
1
,
2
,
3
 ..)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值.)
16
17
2
:单个option的属性(
---
obj.options[obj.selecedIndex]是指定的某个
<
option
>
标签,是一个
---
)
18
19
text属性
---------
返回
/
指定 文本
20
21
value属性
------
返回
/
指定 值，与
<
options value
=
"
"
>
一致。
22
23
index属性
-------
返回下标,
24
25
selected 属性
-------
返回
/
指定该对象是否被选中.通过指定
true
或者
false
，可以动态的改变选中项
26
27
defaultSelected 属性
-----
返回该对象默认是否被选中。
true
/
false
。
28
29
3
:option的方法
30
31
增加一个
<
option
>
标签
-----
obj.options.add(
new
(
"
文本
"
,
"
值
"
));
<
增
>
32
33
删除一个
<
option
>
标签
-----
obj.options.remove(obj.selectedIndex)
<
删
>
34
35
获得一个
<
option
>
标签的文本
-----
obj.options[obj.selectedIndex].text
<
查
>
36
37
修改一个
<
option
>
标签的值
-----
obj.options[obj.selectedIndex]
=
new
Option(
"
新文本
"
,
"
新值
"
)
<
改
>
38
39
删除所有
<
option
>
标签
-----
obj.options.length
=
0
40
41
获得一个
<
option
>
标签的值
-----
obj.options[obj.selectedIndex].value
42
43
注意:
44
45
a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.
46
47
b:obj.option中的option不需要大写,
new
Option中的Option需要大写
48
49
二 应用
50
51
<
html
>
52
<
head
>
53
<
script language
=
"
javascript
"
>
54
 function number()
{
55
 var obj
=
document.getElementById(
"
mySelect
"
);
56
//
obj.options[obj.selectedIndex] = new Option("我的吃吃","4");
//
在当前选中的那个的值中改变
57
//
obj.options.add(new Option("我的吃吃","4"));再添加一个option
58
//
alert(obj.selectedIndex);
//
显示序号，option自己设置的
59
//
obj.options[obj.selectedIndex].text = "我的吃吃";更改值
60
//
obj.remove(obj.selectedIndex);删除功能
61
}
62
</
script
>
63
</
head
>
64
<
body
>
65
<
select id
=
"
mySelect
"
>
66
<
option
>
我的包包
</
option
>
67
<
option
>
我的本本
</
option
>
68
<
option
>
我的油油
</
option
>
69
<
option
>
我的担子
</
option
>
70
</
select
>
71
<
input type
=
"
button
"
name
=
"
button
"
value
=
"
查看结果
"
onclick
=
"
number();
"
>
72
</
body
>
73
</
html
>
74
75
76
77
78
根据这些东西,自己用JQEURY AJAX
+
JSON实现了一个小功能如下:
79
80
JS代码:(只取了于SELECT相关的代码)
81
/** */
/**
82
* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
83
* @prarm selectId 下拉列表的ID
84
* @prarm method 要调用的方法名称
85
* @prarm temp 此处存放软件ID
86
* @prarm url 要跳转的地址
87
*/
88
function linkAgeJson(selectId,method,temp,url)
{
89
 $j.ajax(
{
90
type:
"
get
"
,
//
使用get方法访问后台
91
dataType:
"
json
"
,
//
返回json格式的数据
92
url: url,
//
要访问的后台地址
93
data:
"
method=
"
+
method
+
"
&temp=
"
+
temp,
//
要发送的数据
94
success: function(msg)
{
//
msg为返回的数据，在这里做数据绑定
95
var data
=
msg.lists;
96
coverJsonToHtml(selectId,data);
97
 }
98
}
);
99
}
100
101
/** */
/**
102
* @description 将JSON数据转换成HTML数据格式
103
* @prarm selectId 下拉列表的ID
104
* @prarm nodeArray 返回的JSON数组
105
*
106
*/
107
function coverJsonToHtml(selectId,nodeArray)
{
108
//
get select
109
var tempSelect
=
$j(
"
#
"
+
selectId);
110
//
clear select value
111
isClearSelect(selectId,
'
0
'
);
112
var tempOption
=
null
;
113
for
(var i
=
0
;i
<
nodeArray.length;i
++
)
{
114
//
create select Option
115
tempOption
=
$j(
'
<option value="
'
+
nodeArray[i].dm
+
'
">
'
+
nodeArray[i].mc
+
'
</option>
'
);
116
//
put Option to select
117
tempSelect.append(tempOption);
118
}
119
//
获取退化构件列表
120
getCpgjThgl(selectId,
'
thgjDm
'
);
121
}
122
/** */
/**
123
* @description 清空下拉列表的值
124
* @prarm selectId 下拉列表的ID
125
* @prarm index 开始清空的下标位置
126
*/
127
function isClearSelect(selectId,index)
{
128
var length
=
document.getElementById(selectId).options.length;
129
while
(length
!=
index)
{
130
//
长度是在变化的，因为必须重新获取
131
length
=
document.getElementById(selectId).options.length;
132
for
(var i
=
index;i
<
length;i
++
)
133
document.getElementById(selectId).options.remove(i);
134
length
=
length
/
2
;
135
}
136
}
137
138
/** */
/**
139
* @description 获取退化构件列表
140
* @prarm selectId1 引用软件下拉列表的ID
141
* @prarm selectId2 退化构件下拉列表的ID
142
*/
143
function getCpgjThgl(selectId1,selectId2)
{
144
var obj1
=
document.getElementById(selectId1);
//
引用软件下拉列表
145
var obj2
=
document.getElementById(selectId2);
//
退化构件下拉列表
146
var len
=
obj1.options.length;
147
//
当引用软件列表长度等于1时返回，不做操作
148
if
(len
==
1
)
{
149
return
false
;
150
}
151
//
清空下拉列表的值，两种方式都可以
152
//
isClearSelect(selectId2,'1');
153
document.getElementById(selectId2).length
=
1
;
154
for
(var i
=
0
;i
<
len; i
++
)
{
155
var option
=
obj1.options[i];
156
//
引用软件被选中项不加入
157
if
(i
!=
obj1.selectedIndex)
{
158
//
克隆OPTION并添加到SELECT中
159
obj2.appendChild(option.cloneNode(
true
));
160
}
161
}
162
163
}
164
165
166
167
168
HTML代码:
169
170
<
TABLE width
=
"
100%
"
border
=
0
align
=
"
left
"
cellPadding
=
0
cellSpacing
=
1
>
171
<
tr
>
172
<
td
class
=
"
Search_item_18
"
>
<
span
class
=
"
Edit_mustinput
"
>*</
span
>
引用软件：
</
td
>
173
<
td
class
=
"
Search_content_82
"
>
174
<
input name
=
"
yyrjMc
"
id
=
"
yyrjMc
"
type
=
"
text
"
class
=
"
Search_input
"
tabindex
=
"
3
"
size
=
"
30
"
>
175
<
input name
=
"
yyrjDm
"
id
=
"
yyrjDm
"
type
=
"
hidden
"
>
176
<
input type
=
"
button
"
class
=
"
Search_button_select
"
177
onClick
=
"
linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');
"
value
=
"
选择
"
>
178
</
td
>
179
</
tr
>
180
<
tr
>
181
<
td
class
=
"
Search_item
"
>
<
span
class
=
"
Edit_mustinput
"
>*</
span
>
引用分版：
</
td
>
182
<
td
class
=
"
Search_content
"
id
=
"
yyfb
"
>
183
<
select name
=
"
yyfbDm
"
style
=
"
width:160
"
id
=
"
yyfbDm
"
onChange
=
"
getCpgjThgl('yyfbDm','thgjDm')
"
>
184
185
</
select
>
186
</
td
>
187
</
tr
>
188
<
tr
>
189
<
td
class
=
"
Search_item
"
>
退化构件：
</
td
>
190
<
td
class
=
"
Search_content
"
id
=
"
thgj
"
>
191
<
select name
=
"
thgjDm
"
style
=
"
width:160
"
id
=
"
thgjDm
"
>
192
<
option value
=
"
-1
"
selected
>
无
</
option
>
193
</
select
>
194
</
td
>
195
</
tr
>
196
</
TABLE
>
原文： http://hi.baidu.com/%B6%B9%C9%B3%CD%C3%D7%D3/blog/item/f3f221fc7c7ed64cd6887da0.html
|