常用下拉框

这个我在做项目的时候也经常用到,最常用的是省市区,栏目等等。。。。。。先记一下这个Js吧

首先html

                  <div class="form-group">
                            <label class=" control-label" style="width: 100px; float: left">地区:</label>
                            <div class="col-sm-1" style="line-height: 30px">
                                @if (ViewData["Province"] != null)
                                {
                                    if ((ViewData["Province"] as SelectList).Count() > 0)
                                    {
                                    @Html.DropDownListFor(o=>o.ProvinceId, ViewData["Province"] as SelectList, new {  onchange = "GetCity(this)" })
                                    }
                                }
                            </div>
                            <div class="col-sm-1" style="line-height: 30px">
                                @if (ViewData["City"] != null)
                                {
                                    if ((ViewData["City"] as SelectList).Count() > 0)
                                    {
                                    @Html.DropDownListFor(o=>o.CityId, ViewData["City"] as SelectList,  new {  onchange = "GetDistrict(this)" })
                                    }
                                }
                            </div>
                            <div class="col-sm-1" style="line-height: 30px">
                                @if (ViewData["District"] != null)
                                {
                                    if ((ViewData["District"] as SelectList).Count() > 0)
                                    {
                                    @Html.DropDownListFor(o => o.DistrictId, ViewData["District"] as SelectList, new { id = "District" })
                                    }
                                }
                            </div>
                        </div>
                    </div>

JS

    function GetCity(obj) {
            var val = obj.value; //得到选中值省的Id
            $.ajax({
                url: "/Area/City",
                data: "ProvinceId=" + val,
                type: "Post",
                success: function (data) {

                    $("#CityId").empty();//清除下拉框
                    $.each(data, function (index, item) { //遍历返回的json
                        $("#CityId").append(‘<option value=‘ + item.CityID + ‘>‘ + item.CityName + ‘</option>‘)

                    })//添加select option
                    var obj1 = data[0].CityID; //得到默认市的value
                    $.ajax({
                        url: "/Area/District",
                        data: "CityId=" + obj1,
                        type: "Post",
                        success: function (data1) {
                            $("#District").empty();//清除区的下拉框
                            $.each(data1, function (index, item) {
                                $("#District").append(‘<option value=‘ + item.Id + ‘>‘ + item.DisName + ‘</option>‘)
                            })//把区添加select option
                        }
                    });
                }
            });
        }

        function GetDistrict(obj) {
            var val = obj.value;
            $.ajax({
                url: "/Area/District",
                data: "CityId=" + val,
                type: "Post",
                success: function (data) {
                    $("#District").empty();//清除下拉框
                    $.each(data, function (index, item) {
                        $("#District").append(‘<option value=‘ + item.Id + ‘>‘ + item.DisName + ‘</option>‘)
                    })//添加select option
                }
            });
        }

控制器

  public ActionResult City(int ProvinceId)
        {
            var model = areaService.GetCityByProvince(ProvinceId);
            return Json(model);

        }
        public ActionResult District(int CityId)
        {
            var model = areaService.GetDistrictByCity(CityId);
            return Json(model);
        }

常用下拉框

时间: 2024-11-02 16:00:38

常用下拉框的相关文章

jQuery 下拉框输入匹配提示选项

做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示 HTML代码 <div style="width: 540px;"> <label class="control-label sr-only" for="search_dchannel_repo"></label> <input class="for

SpringMVC之ajax+select下拉框交互常用方式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> <script> //a

随笔-jsp常用到单选和下拉框

.................单选<td class="value">    <input <c:if test="${articlePage.top==1 }">checked="checked"</c:if> value="1" name="top" id="100" class="fangbox" type=&quo

几种常用的控件(下拉框 可选框 起止日期)

下拉框 <div class="form-group">                        <label class="col-xs-3 control-label no-padding-right">状态</label>                        <div class="col-xs-9">                         <select  c

iOS: 悬浮的条件筛选下拉框的使用

1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然后滚动tableView随着移动,到顶部就悬浮着,下拉时仍然跟着滚动,一直滚动初始位置就停止...   3.实现方式 首先:采用分组的tableView,不过类型必须选择为Plain,这种类型本身就带悬浮效果.如果用Group类型,就没有悬浮效果: //设置tableView风格 -(instanc

搜索下拉框

学习的过程中总会遇到很多同类的问题,把这写常用的东西写出来供参考不错,今天开始做这件事.今天是实现的搜索下拉框,代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>搜索下拉框</title> 6 <script src="http://cdn.bootcss.com/jquery/2.1.4/jque

Jquery学习笔记:利用jquery获取select下拉框的值

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

下拉框处理(select)

转:http://www.imdsx.cn/index.php/2017/12/04/select/ 在UI自动化测试过程中,经常会遇到一些下拉框,我们有三种可选方式来操作下拉框. 第一种方法 基于webdriver的两次click,很容易出现问题,不建议使用.(由于部分下拉框在点击一次后,失去焦点再点下一次时可能下拉框中的参数就消失了,那么就无法进行选择了,所以会出现无法定位到目标元素或目标元素不可见的问题.) 第二种方法 基于Action Chains进行连贯操作,首先点击下拉框,然后移动到

MVC 实现下拉框

MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的 <div class="form-group col-xs-12 col-sm-8 col-md-8"> <label class="control-label">这是一个下拉框:</label> @Html.DropDownList("selectRoleId", ViewData[&