利用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 相关文章推荐
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
深入理解js数组的sort排序
May 28 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
javascript自定义右键菜单插件
Dec 16 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python打开音乐文件的实例方法
2020/07/21 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
卖车协议书范本4篇
2014/10/01 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年党总支工作总结
2014/12/18 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
求职意向书范本
2015/05/11 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
pandas进行数据输入和输出的方法详解
2022/03/23 Python
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫