利用js獲取下拉框中所選的值

更新時間：2016年12月01日 09:38:30 作者：—阿輝

本文介紹利用js取到下拉框中選擇的值。并附上實例代碼，需要的朋友可以參考下

現(xiàn)在的需求是：下拉框中要是選擇加盟商讓其繼續(xù)選擇學校，要是選擇平臺管理員則不需要選擇學校。隱藏選擇下拉列表。

選擇枚舉值：

/// <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事件來讓其執(zhí)行設定的方法showSchool(),這里面的參數(shù)是我們選擇的值，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>

這樣就可以了。

效果：

以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

js
下拉框

相關(guān)文章

由 element.appendChild(newNode) ,談開去
由 element.appendChild(newNode) ,談開去...
2006-11-11
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
Echarts直角坐標系x軸y軸屬性設置整理大全
直角坐標系的設置指的是網(wǎng)格,坐標軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標系x軸y軸屬性設置的相關(guān)資料,需要的朋友可以參考下
2022-11-11
PassWord輸入框代碼分享
這篇文章主要介紹了PassWord輸入框的代碼,代碼簡單易懂，非常實用，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
D3.js中data(), enter() 和 exit()的問題詳解
相信大多數(shù)人對D3.js并不陌生。這是一個由紐約時報可視化編輯 Mike Bostock與他斯坦福的教授和同學合作開發(fā)的數(shù)據(jù)文件處理的JavaScript Library，全稱叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比較常見，下面給大家就這方面的知識給大家詳解
2015-08-08
Swiper實現(xiàn)輪播圖效果
這篇文章主要為大家詳細介紹了Swiper實現(xiàn)輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
canvas實現(xiàn)弧形可拖動進度條效果
本篇文章主要介紹了canvas實現(xiàn)弧形可拖動進度條的實例方法，具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
Flutter自適用高度PageView的實現(xiàn)方案
在?Flutter?中,PageView?是一個非常常用的組件,能夠?qū)崿F(xiàn)多個頁面的滑動切換,這篇文章主要介紹了Flutter-自適用高度PageView,需要的朋友可以參考下
2024-08-08
javascript實現(xiàn)雪花飄落效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
js 動態(tài)生成json對象、時時更新json對象的方法
下面小編就為大家?guī)硪黄猨s 動態(tài)生成json對象、時時更新json對象的方法。小編覺的挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12