最近准备给网站新增一个功能，其中两个就是允许用户从表单的下拉列表中选择国家，查了一下发现了如下有趣的解决方法：

  一、表单下拉列表的简易实现方法

  首先科普一下网页制作过程中表单下拉列表的实现原理，在HTML中要想做一个表单首先是要这样来做：

  <pre class="code-snippet__js" data-lang="xml">` `` `` `` Document `</pre>

  上面的这段代码包含了标准了HTML“头”和“身子”，真正起到表单作用的代码是10-12行，称之为form标签或者form元素。

  如果往这个表单里加个文字框非常容易，这样写就可以：

  <pre class="code-snippet__js" data-lang="xml">` `` `` `` Document First name: Last name: ```</pre>

  效果如图：

  接下来就是下来列表，最简单的列表是这样的：

  <pre class="code-snippet__js" data-lang="xml">` `` `` `` Document First name: Last name: 中国 美国 俄罗斯 德国 `</pre>

  效果如图：

  但仔细看代码的话会发现，这样来选国家的话，如果有300个国家，那么就需要把300个国家的名字全都列到上面的option元素中，那可是一件非常麻烦的事情，而且你没法键入文字再筛选。

  二、基于bootstrap-select插件的表单下拉列表

  网络上有这么一个别人已经开发好的插件，名叫bootstrap-select，可以轻松实现我们的需求。

  首先需要安装这个插件：

  <pre class="code-snippet__js" data-lang="xml">` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` Document `</pre>

  从上面这段代码可以看出，我们所谓的“安装”，实际上就是往HTML的“头”部新增了几行代码，每行代码里都有一个网址，这个网址里就包含了我们要安装的插件和背后支持这个插件运行的其他组件。

  在这篇帖子中我还不会详细介绍这些组件都是什么，但是看到这里大家就知道有些网页制作插件的安装实际上是非常简单的，并不需要下载多么大的安装包，再双击安装配置，直接把网址贴过来就能很快上手使用。

  现在我们的HTML“身体”部分还没有什么代码，刚刚用的下来列表代码我也没有加进去，现在我重新调整表格布局和下来菜单内容：

  <pre class="code-snippet__js" data-lang="xml"> `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` Document` First name: Last name: 中国 美国 俄罗斯 ```</pre>

  效果如下：

  摇身一变，两个填充文本的文本框也在网页中居中排放了，而下来列表也变得好看了css点击下拉菜单代码，点击之后看到是这样的：

  默认是中国，但也可以去筛选搜索。

  这个功能的实现就需要这么几行代码：

  <pre class="code-snippet__js" data-lang="xml"> ` 中国 美国 俄罗斯` </pre>

  这其实就是很多时候我觉得学编程做网站特别有意思的地方，因为几行代码就能实现特别神奇高效的功能。

  在这段代码中：

  class="selectpicker"就是告诉select元素：“请调用你刚刚安装的插件里的selectpicker功能”；

  data-live-search="true"就是告诉select元素：“开启下拉列表的搜索功能”；

  data-tokens="中国"就是告诉select元素里面的option元素：“可以通过'中国'这个关键词来搜索到我”。

  三、将国家列表引入下来表单

  通过上面的例子我们知道可以通过下来表单实现搜索和选择，但是我们手里还没有国家名单。

  其实国家名单特别好找，我们可以去GitHub这个网站搜索：

  第一个结果中提供了国家中英文名称：

  接下来就是把整个json格式的文件下载到根目录：

  然后将代码修改成下方的样子：

  <pre class="code-snippet__js" data-lang="xml"> `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` $.ajax({`` url: 'country-code.json',`` type: 'GET',`` `` success: function(response) {`` console.log(response);`` `` const list = JSON.parse(JSON.stringify(response));`` `` let filter = '';`` `` list.forEach(list => {`` `` filter += ` ${list.cn}``` });`` `` $('#country').html(filter); `` }`` });```` Document` First name: Last name: ```</pre>

  我们在上面做了以下改动：

  改动一：在第60行新增了：id="country"，通过这段代码帮助其他代码来明确要把国家数据放到哪个HTML元素中，因为我们在select元素中新增了这段代码，所以一会儿会通过这个id来定位select元素。

  改动二：将select元素中所有的option元素删掉，因为我们的目标是将各个国家的数据准备好之后新增到select元素中，所以不需要直接将option元素写在这里了。

  改动三：在第26-46行新增了以下代码：

  <pre class="code-snippet__js" data-lang="xml"> $.ajax({`` url: 'country-code.json',`` type: 'GET',`` `` success: function(response) {`` console.log(response);`` `` const list = JSON.parse(JSON.stringify(response));`` `` let filter = '';`` `` list.forEach(list => {`` `` filter += ` ${list.cn} }); $('#country').html(filter); } });`</pre>

  这是一段jQuery代码，考虑到许多读者并没有从零开始学习jQuery，所以这里就简单说一下原理：

  这段代码首先加载了我们准备好的包含了各个国家数据的json文件：

  <pre class="code-snippet__js" data-lang="javascript">url: 'country-code.json',</pre>

  然后使用了GET方法来获取里面的数据，这个方法成功后将所有国家数据转变成一个列表：

  <pre class="code-snippet__js" data-lang="javascript">const list = JSON.parse(JSON.stringify(response));</pre>

  然后遍历这个列表中的数据，把每一个国家的中文部分拿出来css点击下拉菜单代码，拼接成option元素需要的格式：

  <pre class="code-snippet__js" data-lang="php">list.forEach(list => {`    filter +=  ${list.cn}` });</pre>

  上面第2行输出的结果与我们前面使用过的option元素是一致的：

  <pre class="code-snippet__js" data-lang="xml">中国`美国`俄罗斯</pre>

  以上代码最后的效果如下：

  接下来就可以任意从中选择国家了。

  参考链接：