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

最新推荐文章于 2021-08-06 16:02:29 发布

Gemini_llw

最新推荐文章于 2021-08-06 16:02:29 发布

阅读量8.7k

点赞数

分类专栏： jQuery 文章标签： jQuery Ajax 级联 select 选择框

jQuery 专栏收录该内容

4 篇文章

订阅专栏

前言：大家好，我是一名正在实习的前端实习生，今天在做项目的时候，遇到了一个没有遇到过的问题，就是从后台获取到的数据要自动填充到选择框内，并且选择框是个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>

服务器端代码：

<?php
if ($_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);
            })
        })

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