细说下拉框

开发工具与关键技术：mvc

作者：黄志鹏

撰写时间：2019/6/7

当我们在做项目的时候会有一些输入框是我们一般是知道或者是目前已知的数据的输入框我们一般是直接把文本框做成一个下拉框。因为这样我们所作的项目方便使用者的操作和使用。

首先我们在设计数据库的时候就需要在数据库中把需要或已知的数据编辑完成。

下面是数据库的样式截图：

接下来我们我们完成下拉框的基本样式：

<div class="form-group row">

   <label class="col-form-label ml-5" for="bingrenliebieName">住院科室：</label>

<select class="form-control col-6 " name="zhuyuanleibie"id="zhuyuanleibie"></select>

 </div>

基本样式完成后我们需要在控制层那边把这个表格查询出来，接下来我们来写查询的代码

public ActionResult ktbzhuyuanleibie()

    {

        List<Select> tbzhuyuanleibie = (from tbys in myModels.zhuyuanleibie

                                 select new Select

                                 {

                                    id =tbys.zhuyuanleibie1,


                                     text = tbys.changqi

                                
                      }).ToList();

        return Json(tbzhuyuanleibie, JsonRequestBehavior.AllowGet);

    }

这时一个单表查询，我们需要封装一个类在这个类里面我们可以写出我们所需要的字段，

查询的代码写好后我们就在视图这边来写提交的方法。

我们先封装一个提交的方法

function tb(id,url) {

$.getJSON(url, function (data) {

            $("#" + id).empty();

  $("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");

            $.each(data, function (i) {

                $("#" + id).append("<option value=" + data[i].id + ">" + data[i].text + "</option>");

            });

        });

 }

写好提交的方法后这就方便我们在这个项目中。无论我们接下来要做多少个下拉框，我们可以直接调用这个方法就行。

接下来我们来调用我们所封装的方法。

代码如下：

function keshi() {

        tb("doctorID", "/hushimm/chaduiyz/ktbdoctor");

  }

然后我们在表格渲染的方法里调用提交的方法即可。