JS代碼實(shí)現(xiàn)兩個(gè)select的同步

2012/10/25 15:32:05作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

當(dāng)選中第一個(gè)下拉列表框的時(shí)候，第二個(gè)下拉列表框的值也隨之改變，這被稱為兩個(gè)下拉列表框的同步。本例學(xué)習(xí)如何實(shí)現(xiàn)這種同步效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無憂（m.wangbatian.cn）</title>
</head>
<body>
<select onchange="selB.options[selectedIndex].selected=true">
<option>testA1</option>
<option>testA2</option>
<option>testA3</option>
<option>testA4</option>
<option>testA5</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select id="selB">
<option>testB1</option>
<option>testB2</option>
<option>testB3</option>
<option>testB4</option>
<option>testB5</option>
</select>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的技巧就是select標(biāo)簽的“selectedIndex”屬性和_“onchange”事件。當(dāng)用戶選擇第一個(gè)下拉列表框后，第二個(gè)下拉列表框也要改變，所以要將此改變添加到第一個(gè)下拉列表框的“onchange’’事件中?！皊electedIndex’’屬性用來獲取當(dāng)前selected標(biāo)簽的選項(xiàng)索引，當(dāng)知道第一個(gè)下拉列表框的選項(xiàng)索引后，使用“options[selectedlndex]．selected”就可以自動(dòng)設(shè)置第二個(gè)下拉列表框的選擇項(xiàng)。

【源碼下載】

本實(shí)例JS代碼下載

標(biāo)簽： JS代碼 select