利用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 相关文章推荐
Jquery解析json字符串及json数组的方法
May 29 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
微信小程序 video组件详解
Oct 25 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
vuex的简单使用教程
Feb 02 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
CI框架的安全性分析
2016/05/18 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
js实现分页功能
2017/05/24 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
node错误处理与日志记录的实现
2018/12/24 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python中有函数重载吗
2020/05/28 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
导师就业推荐信范文
2014/05/22 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
提档介绍信范文
2015/10/22 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android