下拉框联动

这里写了SelClass和SelLesson两个下拉框，下拉框的SelClass的选中值事件会触发AddSelLesson()方法，
该方法通过Ajax向后台异步请求数据动态给下拉框SelLesson赋值

HTML代码如下：
 <th>
                        班级课程：
                    </th>
                    <td>
                        <select  id="SelClass" onChange="AddSelLesson()" style="width:90px;">
                            <option value=""></option>                      
                            @foreach (var k in Model)
                            {
                                <option [email protected]>@k.ClassName</option>
                            }
                        </select>
                        &nbsp;
                        <select  id="SelLesson" style="width:130px;">
                            <option value=""> </option>
                        </select>
                    </td>

js代码：

  <script>
        function AddSelLesson() { 
            $("#SelLesson").empty();
            var ClassName = {
                ClassName: document.getElementById("SelClass").value             
            };                   
            $.ajax({
                url: '../TeaTask/GetLessonName',
                type: 'post',
                data: ClassName, 
                success: function (data) {
                    var obj = JSON.parse(data);
                    for (var i = 0; i < obj.length; i++) {
                        var pro = obj[i];
                        document.getElementById("SelLesson").options.add(new Option(pro.LessonName, pro.LessonName));
                    }
                }
            });  
        }
    
    </script>

控制器代码：返回json

      public ActionResult GetLessonName()
        {
            string ClassName = Request["ClassName"] == null ? "" : Request["ClassName"];
            string JsonLesson = bll.GetLessonNameByTeaIdAndClass(CookieLoginHelper.GetCookieUserLogin().UserLoginId, ClassName);
            return Content(JsonLesson);
        }

猜你喜欢