【移動應用開發(fā)技術】怎么實現(xiàn)jQuery級聯(lián)菜單

【移動應用開發(fā)技術】怎么實現(xiàn)jQuery級聯(lián)菜單

這篇文章主要講解了“怎么實現(xiàn)jQuery級聯(lián)菜單”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著在下的思路慢慢深入，一起來研究和學習“怎么實現(xiàn)jQuery級聯(lián)菜單”吧！層疊樣式表：.button

{

border:

1px

ridge

#ffffff;

line-height:18px;

height:

20px;

width:

45px;

padding-top:

0px;

background:#CBDAF7;

color:#000000;

font-size:

9pt;

}HTML正文：<div

>

<table

width="285"

height="169"

border="0"

align="left"

cellpadding="0"

cellspacing="0"

>

<tr>

<td

width="126">

<select

name="first"

size="10"

multiple="multiple"

class="td3"

id="first">

<option

value="選項1">選項1</option>

<option

value="選項2">選項2</option>

<option

value="選項3">選項3</option>

<option

value="選項4">選項4</option>

<option

value="選項5">選項5</option>

</select>

</td>

<td

width="69"

valign="middle">

<input

name="add"

id="add"

type="button"

class="button"

value="-->"

/>

<input

name="add_all"

id="add_all"

type="button"

class="button"

value="==>"

/>

<input

name="remove"

id="remove"

type="button"

class="button"

value="<--"

/>

<input

name="remove_all"

id="remove_all"

type="button"

class="button"

value="<=="

/>

</td>

<td

width="127"

align="left">

<select

name="second"

size="10"

multiple="multiple"

id="second">

<option

value="選項6">選項6</option>

</select>

</td>

</tr>

</table>Javascript操作代碼：$(document).ready(function(){

$("#add").click(function(){

$("#first

option:selected").appendTo($("#second"));

});

$("#add_all").click(function(){

$("#first

option").appendTo($("#second"));

});

$("#remove").click(function(){

$("#second

option:selected").appendTo($("#first"));

});

$("#remove_