jQuery实现两个DropDownList联动(MVC)

近段时间原本是学习MVC的,谁知道把jQuery也学上了。而且觉得对jQuery更感兴趣,比如今早上有写了一个练习《jQuery实现DropDownList(MVC)http://www.cnblogs.com/insus/p/3413749.html,是jQuery实现DropDownList的。就在此基础上,也使用jQuery实现两个DropDownList之间的联动。

两个DropDownList联动,第一个DropDownList实现并没有过多技术上的考虑,而第二个DropDownList实现起来,有几点需要想到的。
一数据源是要传递参数;二在初始化时,要显示一个选项,如"选择...",而不是一个空的DropDownList;三当第一个DropDownList选择回"选择..."时,第二个DropDownList也要显示回初始状态。

好的,开始了。
先检查数据库(以前有提供下载),是否有此存储过程,如果不存在,可以在SQL数据库查询分析器中,执行下面的存储过程:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        Insus.NET
-- Create date:  2013-06-07
-- Description:    get all kind of fruit by fruit category.
-- =============================================
IF OBJECT_ID(‘[dbo].[usp_FruitKind_GetByFruitCategory]‘) IS NOT NULL
    DROP PROCEDURE [dbo].[usp_FruitKind_GetByFruitCategory]
GO

CREATE PROCEDURE [dbo].[usp_FruitKind_GetByFruitCategory]
(
    @FruitCategory_nbr TINYINT
)
AS
SELECT [FruitKind_nbr],[FruitCategory_nbr],[CategoryName],[KindName] FROM [dbo].[udf_FruitKind]()
WHERE [FruitCategory_nbr] = @FruitCategory_nbr
GO

去MVC应用程序的目录Entities下,打开FruitKindEntity.cs,并添加一个返回List<SelectListItem>函数SelectLists(byte? fruitCategory_nbr):

去相应的控制器KindController.cs写一个JsonResult的Action,并给其添加一个属性[HttpPost],目的是为了稍后在视图的jQuery使用$.post()方法。
 

接下来,修改视图Views/Fruit/Create.cshtml,添加一句html:

开始写jQuery:

上图中,第一步,是获取第一个DropDownList。
第二步,是获取第二个DropDownList。
第三步指示,是第一个DropDownList的选择值。

看看实时操作演示:

嗯,不错喔,不过成功了90%。看到第二个DropDownList,在视图最初显示与第一个DropDownList选择了"选择..."选项时,它都显示为一个空的DropDownList。有点不好。
在这些情况之下,是否让其显示为"选择..."呢?答案是肯定的。可以看看Insus.NET修改jQuery的代码。

基本上添加三部分地方,第一部分是在视图加载时,为第二个DropDownList显示"选择...",第二部分是判断第一个DropDownList的选择值,如果选择的是0,那第二个DropDownList就显示为"选择..."

现在我们再看看修改后的实时操作:

结束了,也许算不上100%完美,Insus.NET的功力暂时只能达到这样子了。

jQuery实现两个DropDownList联动(MVC)

时间: 2024-11-11 03:08:44

jQuery实现两个DropDownList联动(MVC)的相关文章

MVC编辑状态两个DropDownList联动

前几天使用jQuery在MVC应用程序中,实现了<jQuery实现两个DropDownList联动(MVC)>http://www.cnblogs.com/insus/p/3414480.html .此次演练也是在此基础上进行. Insus.NET想在MVC编辑状态中实现两个DropDownList联动.这与前者没有多大区别,仅是一个在MVC的添加状态,另一个是在MVC编辑状态.后者最主要的是在MVC初次加载时,要把数据的值绑定至DropDownList的选项上. 这段时间,所做的MVC练习,

jquery ajax实现省市二级联动

今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provience表的主键作为city表的外键,等下根据省份的id查找对应的市区 查询方法的封装 接下来就是实现查询所有省市以及根据省份id查找对应的城市的方法,这里我写了一个BaseDao封装了一些基本的数据库链接以及关闭连接的方法: BaseDao.java package com.jqueryajax.

FormView控件的InsertItemTemplate中3个DropDownList联动及绑定问题

在InsertItemTemplate中DropDownList联动和绑定不能同时实现,需要去掉SelectedValue='<%# Bind("CompanyID") %>即可实现联动,另外SqlDataSource应该放在InsertItemTemplate中. <%@ Page Title="" Language="VB" MasterPageFile="~/Manage/Site.master" Au

JQuery的两个each方法的注意点

Jquery官网上两个each用法: http://api.jquery.com/jQuery.each/ http://api.jquery.com/each/ 使用时注意点 <!DOCTYPE html> <html> <head> <title>Untitled Page</title> <script type="text/javascript" src="jquery141.js">&

JQuery 实现两列等高并自适应高度

想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() { var _leftheight = jQuery(".left").height(); var _rightheight = jQuery(".right").height(); if (_leftheight > _rightheight) { jQuery

JQuery+Ajax实战三级下拉列表联动(八)

本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构I

JQuery打造下拉框联动效果

做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框所有清除,然后又一次拼接刷新的内容.用JQuery实现比較easy,代码以省市联动效果为例实现. JSP页面代码例如以下: <li id="base"> <p>生源地:</p> <label> <select id="

Html.DropDownList 选中 mvc view 弱类型

List<Model.SysGroup> listGroup = sysGroupBll.Where(o => o.IsSb == true, o => o.Id).ToList();            List<SelectListItem> items = new List<SelectListItem>();            foreach (var group in listGroup)            {              

iOS 类似外卖 两个tableView联动

在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下. 效果实现如图所示: 具体实现的内容可以参考原文,参考文章:<iOS 类似美团外卖 app 两个 tableView 联动效果实现> 首先,从界面上来看,很显然是两个UITableview上下滑动的效果.而这种滑动的效果核心是左边的tableView如何和右边的tableView进行关联,并且点击左边tableView之后右边的tableview也可以滑动到对应的section. 好了,分析完毕之后,我们应该清楚了我们的2个需求:1.