快捷導(dǎo)航

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

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

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

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

選擇枚舉值：

/// <summary>
/// 平臺(tái)角色
/// </summary>
public enum AdministratorRole
{
 [Display(Name = "平臺(tái)管理員")]
 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>

先讓學(xué)校列表隱藏，style=”display:none”;效果和下圖一樣。我們利用下拉框的onChange事件來(lái)讓其執(zhí)行設(shè)定的方法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>

這樣就可以了。

效果：

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

您可能感興趣的文章:

js
下拉框

相關(guān)文章

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