html.dropdownlist怎么实现联动？实用技巧分享！

大家今天跟大家伙儿聊聊我在捣鼓网页时用到的一样小玩意——HTML下拉列表，也就是<select>标签，咱通常叫它dropdownlist。

我就是想弄个简单的下拉菜单，让用户能从几个选项里挑一个。这不挺常见的需求嘛所以我就直接上手：

创建基本的下拉列表

先在 HTML 里头放个 <select> 标签，然后在里头塞几个 <option> 标签，每个 <option> 代表一个选项。就像这样：

<select>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>

</select>

这样一来，一个最最基本的下拉列表就出炉！用户点一下，就能看到苹果、香蕉、橘子这几个选项，然后选一个。

给下拉列表加点料

光秃秃的下拉列表可不够看。我还想给它整点花样。

• 设置默认选中项： 我想让页面一加载，就默认选中“香蕉”。简单，给“香蕉”那个 <option> 标签加上 selected 属性就完事儿。
• 给选项分组： 选项太多，看得眼花？没事，咱可以用 <optgroup> 标签给它们分分组，这样就清晰多！

更进一步：二级联动

我遇到个更复杂的需求。我需要做一个省份和城市的下拉列表，选省份，城市列表里就只显示这个省份的城市。这就是传说中的“二级联动”。

这可把我给难住。光靠 HTML 可搞不定，得用 JavaScript 来帮忙。大概思路就是：

1. 先把所有省份和城市的数据准备通常用 JavaScript 的数组或者对象来存。
2. 给省份的下拉列表加个 onchange 事件，一旦用户选某个省份，就触发这个事件。
3. 在 onchange 事件里写 JavaScript 代码，根据用户选的省份，把对应的城市数据填到城市下拉列表里。

这部分代码写起来稍微有点麻烦，我就不在这儿全贴出来。不过基本思路就是这样，大家伙儿可以自己去试试。

HTML 下拉列表这玩意儿，看着简单，也能玩出不少花样。只要肯动手，多试试，就能做出各种各样有趣又实用的效果！