通過隱藏option實現select的聯動效果

2022-09-20 05:45:09 字數 3054 閱讀 7401

開始的時候需求是根據一定條件隱藏一部分標籤,類似聯動效果,但是目前的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第一種方法...