開始的時候需求是根據一定條件隱藏一部分標籤,類似聯動效果,但是目前的html規範並沒有為提供隱藏的效果,因此常用的設定display或者visibility無效。網上大部分解決方案是刪除節點或置空。這顯然不能夠滿足需求。後來經過試驗,選擇了利用標籤包裝的解決方案,基本原理如下:
當需要隱藏的時候,在標籤外包裝乙個標籤,再令標籤為不可見。
當需要顯示的時候,恢復其正常的狀態,即,去掉外面的標籤。
由於比較懶,所以利用jquery框架來操作dom物件和css,**如下:
2doctype html public
"-//w3c//dtd xhtml 1.0 transitional//en""
">
3<
html xmlns="
">
4<
head
>
5<
title
>
untitled page
<
/title>
6<
script type="
text/j**ascript
"src="
"><
/script>
7<
script type="
text/j**ascript
"language="
j**ascript
">8$(
function
());
1314
//the change event of language dropdown-list
15var
edroplangchange
=function
());
2324
//filter the data through selected value of language dropdown-list except .
25//
if the option is , it only needs to show all and hide nothing.
26if
(parseint(selectedvalue) !=0
));32}33
};34
35//
the change event of frame dropdown-list.
36var
edropframechange
=function
();40
<
/script>
41<
/head>
42<
body
>
43<
div>
44<
select id="
droplang
">
45<
option selected="
selected
"value="
0">&
lt;please select
>
<
/option>
46<
option value="
1">
j**ascript
<
/option>
47<
option value="
2">
j**a
<
/option>
48<
option value="
3">
c#<
/option>
49<
/select>
50<
select id="
dropframe
">
51<
option selected="
selected
"value="
0">&
lt;please select
>
<
/option>
52<
option value="
1"parentid="
1">
jquery
<
/option>
53<
option value="
2"parentid="
1">
prototype
<
/option>
54<
option value="
3"parentid="
2">
struts
<
/option>
55<
option value="
4"parentid="
2">
spring
<
/option>
56<
option value="
5"parentid="
2">
velocity
<
/option>
57<
option value="
6"parentid="
2">
hibernate
<
/option>
58<
option value="
7"parentid="
3">
asp.net mvc
<
/option>
59<
option value="
8"parentid="
3">
castle
<
/option>
60<
/select>
61<
/div>
62<
/body>
63<
/html>
這樣,通過上乙個下拉框的選擇過濾下拉框的內容,基本實現了隱藏的效果,當然,也可以把這種方法利用在下拉框級聯選擇的功能上,無需ajax。
該**在ie6,ie7,chrome2,firefox3。5下驗證通過。
通過隱藏option實現select的聯動效果
複製 如下 untitled page j ascript j a c jquery prototype struts spring fqpqmxpgntid 2 velocity hibernate asp.net mvc castle 這樣,通過上乙個下拉框的選擇過濾下拉框的內容,基本實現了隱藏...
SELECT中OPTION元素的顯示隱藏
在chrome和firefox瀏覽器中,有兩種方式控制顯示隱藏。1 option元素的hidden屬性,true為隱藏,false為顯示 2 option元素的style.display設定為none則為隱藏 這兩種方式都可以通過js來控制。在ie中,很麻煩,上面兩種方式都不支援,目前的辦法是給外面...
jquery以及js實現option左移右移
審核人員 style font size 10pt width 35px nclick right style font size 10pt width 35px nclick right true 系統人員 zhangsan lisi lisi wangwu 介面如下圖 首先jquery第一種方法...