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

2019-11-19 18:44:38

字體：大中小

供稿：網(wǎng)友

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

選擇枚舉值：

/// <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>

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

這樣就可以了。

效果：