使用jQuery和Ajax自动填充选择框（select）

前言：大家好，我是一名正在实习的前端实习生，今天在做项目的时候，遇到了一个没有遇到过的问题，就是从后台获取到的数据要自动填充到选择框内，并且选择框是个select级联（一个选择框改变，另一个也会改变，类似在淘宝买东西时的地址选择框）。

类似这种效果：

select级联遇到过，但是从后台获取数据处理select级联还是第一次。

找了篇优质的教程给萌新小白们（包括我）。

原址：https://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax#the-goal

---------------------------------------------------------------------------------------------------------------------

如果你熟悉如何使用选择框进行分类或者级联的话，就像ebay在出售货品时那样，通常这需要大量的javascript语言来进行处理维护，但是jQuery可以添加少量的Ajax来极大的简化这个工作。

目标：

允许用户从选择框中选中一个类别，另一个选择框出现相应的数据（级联）。

前置条件：

1.最新版本的jQuery

2.对json有基本的理解（作者说：不要因为它你就放弃，其实它非常非常的简单。。。hh）

3.可以响应ajax的服务器端脚本（php什么的。ajax的请求地址）

工作原理：

当最高级别的选择框（级联的父选择框）更改时，会向后台发送一个ajax请求，向请求地址传送当前选中的<option>的value值，然后将从后台返回的数据循环填充到另一个选择框（级联的子选择框）

代码：

1.页面的HTML

2.服务器端代码（php）

3.jQuery和ajax

4.json代码

HTML：

<form action="/select_demo.php">  <label for="ctlJob">Job Function:</label>  <select name="id" id="ctlJob">    <option value="1">Managers</option>    <option value="2">Team Leaders</option>    <option value="3">Developers</option>  </select>  <noscript>    <input type="submit" name="action" value="Load Individuals" />  </noscript>  <label for="ctlPerson">Individual:</label>  <select name="person_id" id="ctlPerson">    <option value="1">Mark P</option>    <option value="2">Andy Y</option>    <option value="3">Richard B</option>  </select><input type="submit" name="action" value="Book" /></form>

服务器端代码：

<?phpif ($_GET['id'] == 1) {  echo <<<HERE_DOC    [ {"optionValue": 0, "optionDisplay": "Mark"}, {"optionValue":1, "optionDisplay": "Andy"}, {"optionValue":2, "optionDisplay": "Richard"}]HERE_DOC;} else if ($_GET['id'] == 2) {  echo <<<HERE_DOC    [{"optionValue":10, "optionDisplay": "Remy"}, {"optionValue":11, "optionDisplay": "Arif"}, {"optionValue":12, "optionDisplay": "JC"}]HERE_DOC;} else if ($_GET['id'] == 3) {  echo <<<HERE_DOC    [{"optionValue":20, "optionDisplay": "Aidan"}, {"optionValue":21, "optionDisplay":"Russell"}]HERE_DOC;}?>

JSON返回数据（底下的数据是当传送的id=2时）：

[  {"optionValue":10, "optionDisplay": "Remy"},  {"optionValue":11, "optionDisplay": "Arif"},  {"optionValue":12, "optionDisplay": "JC"}]

jQuery和Ajax：

<script src="jquery.js"></script><script>$(function(){  $("select#ctlJob").change(function(){    $.getJSON("/select.php",{id: $(this).val()}, function(j){      var options = '';      for (var i = 0; i < j.length; i++) {        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';      }      $("select#ctlPerson").html(options);    })  })})</script>

PS：这段ajax向后台传送了id数据，返回的数据循环填充到子选择框

-------------------------------------------------------------------------------------------------------------------------------------------------------

今天自己写的一小段：

$("#select_year").change(function(){            $.post("url",{                 year:$(this).val()            },function(result){

var result=JSON.parse(result);                var optionMonthCache='<option value="'+result[i].optionValue+'">'+result[i].optionDisplay+'</option>';                $("#select_month").append(optionMonthCache);            })        })

选择某一年份，然后子选择框出现对应的月份