Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)

需求类似这样  ↓ ↓ ↓

  --》   

菜单A发生变化,动态取数据填充下拉菜单B。

JS代码如下:

<script type="text/javascript">
     $(function () {
         $("#TeamSelect").change(function () {

             var tid = $("#TeamSelect option:selected").val();
             $.ajax({
                 url: "/ajax/ajaxGetManagerByTeam.aspx?teamId="+tid,
                 type: "Post",
                 contentType: "application/json",
                 dataType: "json",
                 success: function (data) {
                     var ddl = $("#ManagerSelect");
             //删除节点
                     $("#ManagerSelect option").remove();                     //转成Json对象
                     var result = eval(data);
                     //循环遍历 下拉框绑定
                     $(result).each(function (key) {                //添加option 对应Json对象名称
                         var opt = $("<option></option>").text(result[key].ManagerName).val(result[key].ManagerID);
                         ddl.append(opt);
                     });
                 },
                 error: function () {
                     alert("Error");
                 }
             });
         });
     });

    </script>

ajaxGetManagerByTeam.aspx.cs页面代码如下:

     protected void Page_Load(object sender, EventArgs e)
        {
            var teamId = 0;
            try
            {
                var teamIdStr = Request.QueryString["teamId"];
                if (!string.IsNullOrEmpty(teamIdStr))
                {
                    int.TryParse(teamIdStr, out teamId);
                    DataTable dt = GetManager(teamId);     //GetManager()是一个返回DataTable类型数据的方法
            string proStr = JsonConvert.SerializeObject(dt);    //将DataTable序列化为Json格式的字符串
                    Response.ContentType = "text/plain";
                    Response.Write(proStr);

                }
            }
            catch(Exception ex)
            {
                Response.Write(ex);
            }

        }

另可给Select添加默认项:

$("#ManagerSelect").append("<option value=‘-1‘>全部</option>");

//或者

$("#ManagerSelect")[0].options.add(new Option("全部", "-1"));
时间: 2024-10-21 17:50:38

Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)的相关文章

easyui 绑定下拉框,下拉框选择改变事件的触发方法

//①定义下拉框 //离线公司[个人或公司] 下拉框 var tmpComOrPer = { type: 'combobox', options: { onSelect:function(data) { ComOrPerChange(false); }, editable:false, panelHeight: 'auto', valueField: 'Type', textField: 'label', data: [ { label: '@BaseRes.OSP_CTL_087', Type

.net简单页面后台绑定下拉框,按钮,分页 后台cs文件

二.cs文件 using System;using System.Collections.Generic;using System.Web.UI;using System.Web.UI.WebControls;using BS.EAP.DBAccess;using System.Data;using BS.EAP.Authentication;using BS.EAP.BizMgt.DataQuery;using System.Web.Security;using System.Collecti

.net简单页面后台绑定下拉框,按钮,分页 前台aspx页面

一.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdateMTablesQCols.aspx.cs"    Inherits="BS.EAP.Portal.Business.DataQuery.UpdateMTablesQCols" EnableEventValidation="false" %> <%

Ajax提高篇(7)Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)&

页面多选下拉框 jquery.multiple.select

1.首先引用jquery.multiple.select.js.multiple-select.css 2.在页面select下拉列表里面加一个multiple="multiple" <select name="nimbusHost" id="nimbusHost" multiple="multiple"> <c:forEach items="${stormIps}" var="

绑定下拉框值和显示的好办法

开发中经常要用到下拉框ComboBox 而下拉框经常需要绑定值和显示值不同的情况 即Value和Text是不同的值 这时候是比较头痛的 最近发现了一个比较好用的办法 利用EntryDictionary的ArrayList链绑定数据 然后分别设置ComboBox的ValueMember和DisplayMember就可以了 代码如下: //声明下拉框控件 ComboBox cbb = new ComboBox(); //声明ArrayList ArrayList list = new ArrayLi

&lt;select&gt; 绑定下拉框

证实可用 <select name="PaymentWay" class="easyui-combobox filewidth" id="PaymentWay" editable="false"> @{var listSelect = (List<SelectListItem>)ViewBag.paymentWayList;} @foreach (var item in listSelect) { &l

SSM + AJAX + JSON 动态下拉框

前台页面 <%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3

获取多选下拉框(select标签设置multiple属性)的值

原文链接:https://blog.csdn.net/qq846294282/article/details/82427002   (侵删) <select multiple>不能直接获取value,需要借助该元素的options属性.如下: <select id="select" multiple> <option value="1">1111</option> <option value="2&qu