快捷搜索:

csss达成的三个带复选框的下拉框w88官方网站手机

作者: w88官方网站手机版  发布:2019-08-24

今日的急需是:下拉框中若是选项加盟商让其延续选择学校,假如选用平台管理员则没有须求选择学校。掩盖选用下拉列表。

效果图:

首先种联合浮动格局,在英特网看到的,认为对于作者的使用性不高,相比较后端不会提供这种json。。。

选料枚举值:

w88官方网站手机版 1

落到实处截图

/// <summary>
/// 平台角色
/// </summary>
public enum AdministratorRole
{
 [Display(Name = "平台管理员")]
 PlatformAdministrator = 1,
 [Display(Name = "加盟商")]
 JoiningTrader = 10
}

css:

w88官方网站手机版 2

代码:

<style type="text/css"> 
/* 带复选框的下拉框 */ 
ul li{ 
list-style: none; 
padding:0px; 
margin: 0px; 
} 

.select_checkBox{ 
border:0px solid red; 
position: relative; 
display:inline-block; 


} 
.chartQuota{ 
height:23px; 
float:left; 
display:inline-block; 
border:0px solid black; 
position: relative; 
} 

.chartOptionsFlowTrend{ 
z-index:300; 
background-color:white; 
border:1px solid gray; 
display:none; 
position: absolute; 
left:0px; 
top:23px; 
width:150px; 
} 
.chartOptionsFlowTrend ul{ 
float:left; 
padding: 0px; 
margin: 5px; 
} 
.chartOptionsFlowTrend li{ 
/* float:left; */ 
display:block; 
position: relative; 
left:0px; 
margin: 0px; 
clear:both; 
} 
.chartOptionsFlowTrend li *{ 
float:left; 
} 
a:-webkit-any-link { 
color: -webkit-link; 
text-decoration: underline; 
cursor: auto; 
} 
.chartQuota p a { 
float: left; 
height: 21px; 
outline: 0 none; 
border: 1px solid #ccc; 
line-height: 22px; 
padding: 0 5px; 
overflow: hidden; 
background: #eaeaea; 
color: #313131; 
text-decoration: none; 
} 

.chartQuota p { 
margin:0px; 
folat:left; 
overflow: hidden; 
height: 23px; 
line-height:24px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p { 
height: 23px; 
line-height: 23px; 
overflow: hidden; 
position: relative; 
z-index: 2; 
background: #fefbf7; 
padding-top: 0px; 
display: inline-block; 
} 
.chartOptionsFlowTrend p a { 
border: 1px solid #fff; 
margin-left: 15px; 
color: #2e91da; 
} 
</style>

html

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

html:

  <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas">
    <option value="">--产品类目--</option>
  </select>
  <select ng-model="s2" ng-options="util.name for util in s1.utils">
    <option value="">--产品类型--</option>
  </select>

    先让高校列表遮蔽,style=”display:none”;效果和下图一律。大家采用下拉框的onChange事件来让其实行设定的点子showSchool(),那中间的参数是我们接纳的值,this代表的AdministratorRole。

<div class="select_checkBox"> 
<div class="chartQuota"> 
<p> 
<a href="javascript:;" hidefocus="true" title="请选择指标">选择指标 
<b></b> 
</a> 
</p> 

</div><br> 
<div class="chartOptionsFlowTrend""> 
<ul> 
<li class=""><input type="checkbox" value="1">浏览次数(PV) 
</li> 
<li class=""><input type="checkbox" value="1">独立访客(UV) 
</li> 
<li class=""><input type="checkbox" value="1">IP 
</li> 
<li class=""><input type="checkbox" value="1">新独立访客 
</li> 
<li class=""><input type="checkbox" value="1">访问次数 
</li> 
</ul> 
<p> 
<a href="javascript:;" title="确定" hidefocus="true" class="a_0">确定</a><a 
href="javascript:;" title="取消" hidefocus="true" class="a_1">取消</a> 
</p> 
</div> 
</div>

js

js代码:

js:

   $scope.selectDatas = [{
        code: 01,
        name: "监控安全类",
        utils: [
          { code: 0101, name: "遥控门锁" },
          { code: 0102, name: "声光报警器" },
          { code: 0103, name: "摄像头" }
        ]
      },
      {
        code: 02,
        name: "大家电",
        utils: [
          { code: 0201, name: "空调" },
          { code: 0202, name: "洗衣机" },
          { code: 0203, name: "洗碗机" }
        ]
      }
    ]
 <script type="text/javascript"> 
 function showSchool(v){  
  if (10 == v) {
   document.getElementById("schoolSelect").style = "display:inline";
  } else {
   document.getElementById("schoolSelect").style = "display:none";
  }
 }
</script>
<script type="text/javascript"> 
$(function(){ 
$(".select_checkBox").hover(function(){ 
$(".chartOptionsFlowTrend").css("display","inline-block"); 
},function(){ 
$(".chartOptionsFlowTrend").css("display","none"); 
}); 
}); 
</script>

第两种联合浮动方式,此番是依靠后台需求,自个儿写的多个联合浮动,当然未有央浼接口,就是单身写个固定值

这般就足以了。

您或然感兴趣的稿子:

  • AngularJS使用ng-repeat指令完结下拉框
  • JS仿百度机动下拉框模糊相称提醒
  • js自定义select下拉框美化特效
  • js实现的下拉框二级联合浮动成效
  • 原生JavaScript实现动态省市县三级联合浮动下拉框菜单实例代码
  • js和jquery分别证实单选框、复选框、下拉框
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • javascript贯彻省市区三级联合浮动下拉框菜单
  • jsp从数据库获取数据填充下拉框实现二级联合浮动菜单的秘籍
  • js完结Select下拉框具有输入功用的艺术
  • JS获取文本框,下拉框,单选框的值的简便实例
  • Js获取下拉框选定项的值和文书的兑当代码
  • 选拔js获取下拉框中所选的值

1.联合浮动的笔触

效果:

1.先是是选项总连串
2.总项目选项后,会涉嫌出设备
3.器具选取后,会涉及出属性
4.属性选用后,会基于属性的两样,关联出差异的体系

w88官方网站手机版 3

2.代码

以上便是本文的全体内容,希望对大家具备帮忙,同期也期待多多帮助脚本之家!

1)设备项目下拉

你恐怕感兴趣的篇章:

  • AngularJS使用ng-repeat指令完结下拉框
  • JS仿百度机动下拉框模糊相配提醒
  • js自定义select下拉框美化特效
  • js落成的下拉框二级联合浮动作效果应
  • 原生JavaScript落成动态省市县三级联合浮动下拉框菜单实例代码
  • js和jquery分别证实单选框、复选框、下拉框
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • javascript落实省市区三级联合浮动下拉框菜单
  • jsp从数据库获取数据填充下拉框完毕二级联合浮动菜单的点子
  • js达成Select下拉框具备输入功效的秘诀
  • js csss完毕的贰个带复选框的下拉框
  • JS获取文本框,下拉框,单选框的值的简练实例
  • Js获取下拉框选定项的值和文件的完结代码

html

<select ng-model="devicetype" ng-options="x.category for x in devices" ng-change="changeType(devicetype)">
  <option value="">--设备--</option>
</select>

js

$scope.devices = [
   {"category":"大家电"},
     {"category":"红外感应"},
   {"category":"监控"},
   {"category":"灯光"},
]
// 根据大类来获取设备列表
$scope.changeType = function(x){
  $log.log(x.category)
  //TODO: 真正使用肯定是要用$http来请求设备列表
  //暂时测试使用下面的
  switch(x.category){
  case "大家电":
      $scope.yourdevices = [
        {"dev":"电视机(mac:32309fsaf)"},
        {"dev":"洗衣机(mac:32309fsaf)"},
        {"dev":"冰箱(mac:32309dqsq)"},
        {"dev":"空调(mac:32309fsaf)"}
      ];
      break;
  }
}

2)设备下拉

html

<select ng-model="yourdevice" ng-options="x.dev for x in yourdevices" ng-change="changeDev(yourdevice)">
  <option value="">--你的设备--</option>
</select>

js

$scope.changeDev = function (x) {
 $log.log(x.dev)
 switch (x.dev) {
  case '电视机(mac:32309fsaf)':
   $scope.params = [
    {
     'display_name': '开关',
     'data_type': 'bool',
     'data_range': [ '开','关']
    },
    {
     'display_name': '温度',
     'data_type': 'num',
     'data_range': [30]
    }
   ]
   //此处将json转换成对象,方便下面的属性相关操作,例如“开关”属性,要找去其相关的类型数据和值
   var paramsarr = $scope.params;
   var paramobj = {
   };
   paramsarr.forEach(function (v, i) {
    paramobj[v.display_name] = v;
   })
   $scope.paramobjs = paramobj;
 }
}

3)属性下拉

html

<select ng-model="param" ng-options="p.display_name for p in params" ng-change="changeParam(param.display_name)">
  <option value="">--属性--</option>
</select>

js

//获取数据类型和数据值
$scope.changeParam = function (x) {
 var pobj = $scope.paramobjs;
 $scope.views = pobj[x];
 $scope.type = $scope.views.data_type
 $log.log($scope.views)
}

4)属性项

html

利用ng-swtch来展开决断展现,若数值类型位bool,则显示单选框,若数值类型位num,则显得位大小比较下拉框和文本框

<div ng-switch="type">
    <div ng-switch-when="bool" style="margin: -20px auto auto 90px;">
      <label ng-repeat="x in views.data_range">
        <input type="radio" name="radio" value="{{x}}">{{x}}
      </label>
    </div>
    <div ng-switch-when="num" style="margin: -20px auto auto 90px;">
      <select ng-model="compare">
        <option value="0"><</option>
        <option value="1">=</option>
        <option value="2">></option>
      </select>
      {{views.data_range}}
      <input type="text">
    </div>
  </div>

3.落到实处际效果果与利益

w88官方网站手机版 4

以上便是本文的全部内容,希望对大家的读书抱有扶助,也期望我们多多扶助脚本之家。

你或者感兴趣的小说:

  • javascript达成省市区三级联合浮动下拉框菜单
  • 省市区三级联合浮动下拉框菜单javascript版
  • js 自定义的联合浮动下拉框
  • js实现的下拉框二级联合浮动效应
  • JavaScript Ajax Json完成上下级下拉框联合浮动作效果应实例代码
  • jQuery jsp下拉框联合浮动获取本地数据的法子(附源码)
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • javascript完毕日期三级联合浮动下拉框选拔菜单
  • JS完毕的简约下拉框联动作效果应示例

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:csss达成的三个带复选框的下拉框w88官方网站手机

关键词: www.w88985.c