利用js获取下拉框中所选的值


Posted in Javascript onDecember 01, 2016

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校。隐藏选择下拉列表。

选择枚举值:

/// <summary>
/// 平台角色
/// </summary>
public enum AdministratorRole
{
 [Display(Name = "平台管理员")]
 PlatformAdministrator = 1,
 [Display(Name = "加盟商")]
 JoiningTrader = 10
}

代码:

<div class="form-group">
  @Html.LabelFor(x => x.AdministratorRole, new { @class = "col-sm-2 control-label" })
  <div class="col-sm-8">
   @Html.EnumDropDownListFor(x => x.AdministratorRole, new { @class = "form-control", onChange = "showSchool(this.value)", placeholder = Html.DisplayNameFor(x => x.AdministratorRole) })
  </div>
  <div class="col-sm-2">
   <div class="help-block">@Html.ValidationMessageFor(x => x.AdministratorRole)</div>
  </div>
 </div>
 <div class="form-group" style="display:none" id="schoolSelect">
  @Html.LabelFor(x => x.SchoolId, new { @class = "col-sm-2 control-label" })
  <div class="col-sm-8">
   @Html.DropDownListFor(x => x.SchoolId, Model.Schools, new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.SchoolId) })
  </div>
  <div class="col-sm-2">
   <div class="help-block">@Html.ValidationMessageFor(x => x.SchoolId)</div>
  </div>
 </div>

    先让学校列表隐藏,style=”display:none”;效果和下图一样。我们利用下拉框的onChange事件来让其执行设定的方法showSchool(),这里面的参数是我们选择的值,this代表的AdministratorRole。

js代码:

<script type="text/javascript"> 
 function showSchool(v){  
  if (10 == v) {
   document.getElementById("schoolSelect").style = "display:inline";
  } else {
   document.getElementById("schoolSelect").style = "display:none";
  }
 }
</script>

这样就可以了。

效果:

利用js获取下拉框中所选的值

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 #Javascript
实例解析jQuery工具函数
Dec 01 #Javascript
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php适配器模式介绍
2012/08/14 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python遍历目录的方法小结
2016/04/28 Python
python线程、进程和协程详解
2016/07/19 Python
Python 闭包的使用方法
2017/09/07 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
ipad上运行python的方法步骤
2019/10/12 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
公证书样本
2014/04/10 职场文书
公司承诺书格式
2014/05/21 职场文书
英语专业自荐书
2014/06/13 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
个人先进事迹总结
2015/02/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android