项目开发中一部分需要实现下拉框功能，在网上找了一些资料，杂七杂八的，缺胳膊少腿的挺多，本来就很混乱，这一看更懵了。决定花点时间研究研究清楚。 我认为的实现原理： 大概就是后台从数据库里面拿到数据，然后处理为json，通过ajax接收后台处理好的json，然后填充到select中，然后展示出来。而json一般为字典形式的数据，所以select中展示的数据是字典中的value值(因为我想要的值是字典中的value值),所以需要在js中处理一下，从而取得value值。以上是我的想法及实现方式，如果哪里有错误，还请各位博友赐教。
实现之后的效果： 这只是其中一个下拉框的效果，其他两个效果跟这个一样。
以下是详细代码实现：
models.py class Model(models.Model): model_id = models.AutoField(primary_key=True) model_name = models.CharField(max_length=45) class Meta: managed = False db_table = 'model' views.py def down(request): if request.method == 'POST': modelData = Model.objects.filter().values('model_id', 'model_name') transformation = list(modelData) # [{'model_id': 1, 'model_name': 'abc'}, {'model_id': 2, 'model_name': 'def'}, {'model_id': 3, 'model_name': 'ghi'}, {'model_id': 4, 'model_name': 'jkl'}, {'model_id': 5, 'model_name': 'mno'}] list_a = [] # [1, 2, 3, 4, 5] list_b = [] # ['abc', 'def', 'ghi', 'jkl', 'mno'] for i in transformation: list_a.append(i.get('model_id')) list_b.append(i.get('model_name')) dictionary = dict(zip(list_a, list_b)) # {'1': 'abc', '2': 'def', '3': 'ghi', '4': 'jkl', '5': 'mno'} return HttpResponse(json.dumps(dictionary)) # 数据格式为json格式，不然ajax会接收到不完整的数据 pass # 代码中每行的注释是处理完数据之后的数据，方便观察数据处理之后的样子 js文件 window.onload = sarial();//加载页面时自动执行方法 function sarial(){ $.ajax({ url: "/down/", type: "post", dataType: "json", contentType: "application/json", traditional: true, success: function (data) { console.log(data); // for (var i = 0; i < data.length; i++) { //var jsonObj =data[i]; for (var i in data) { // 上面说到了，因为json是字典形式的数据，所以下面“data[i]”的值就为value $("#monster").append("<option value='"+ data[i] +"'>" + data[i] + "</option>"); // 因为我用到了3个下拉框，所以分别使用了3个不同的id，依次是：monster，monster1，monster2. //你可以根据自己的需求来决定使用几个下拉框，然后定义几个id，不能重复。 $("#monster1").append("<option value='"+ data[i] +"'>" + data[i] + "</option>"); $("#monster2").append("<option value='"+ data[i] +"'>" + data[i] + "</option>"); } }, error: function (msg) { alert("数据加载出错，请重试！"); } });然后下面这三段代码是我加的下拉框，依次为查询处的下拉框、添加时的下拉框和修改时的下拉框：
# 查询处的下拉框 <form method="post" name="searchForms"> 产品：<select name="productModel" id="monster" style="width: 150px;height: 26px;"> <option value="">=显示全部型号=</option> {% for k,v in data.items %} <option value="{{ k }}">{{ v }}</option> {% endfor %} </select> </form> # 添加处的下拉框 <form method="post" name="addForm" enctype="multipart/form-data"> <strong>型号：</strong><select name="productModel" id="monster1" style="width: 568px;height: 34px;"> <option id="productModel" value="">==请选择型号==</option> {% for k,v in data.items %} <option value="{{ k }}">{{ v }}</option> {% endfor %} </select> </form> <form method="post" name="updateForm" > 型号：<select name="productModel" id="monster2" style="width: 568px;height: 34px;"> {% for k,v in data.items %} <option value="{{ k }}">{{ v }}</option> {% endfor %} </select> </form>如果你觉得看了我的博客对你的学习有帮助，请分享给其他博友学习吧！ 希望有赞有评论！ （转载请保留作者署名和文章出处）
