JavaScript 联动代码
时间: 2024-02-18 17:32:10 浏览: 25
JavaScript 联动可以根据一个下拉列表的选项,动态修改另一个下拉列表的选项。下面是一个简单的例子:
HTML 代码:
```html
<select id="first">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select id="second">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
```
JavaScript 代码:
```javascript
var first = document.getElementById('first');
var second = document.getElementById('second');
first.addEventListener('change', function() {
if (first.value === '1') {
second.innerHTML = '<option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option>';
} else if (first.value === '2') {
second.innerHTML = '<option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option>';
} else {
second.innerHTML = '<option value="7">选项7</option><option value="8">选项8</option><option value="9">选项9</option>';
}
});
```
这个例子中,当第一个下拉列表的选项发生变化时,根据不同的选项值,修改第二个下拉列表的选项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)