Jquery 如何在角材质中显示下拉列表

我不熟悉棱角材料。所以我试着用有角度的材料做形状。我能够显示输入字段。因为它没有值，所以字段名看起来像占位符，如果用户单击输入字段，字段名将设置为title，并且可以输入值

我正在尝试显示与材质输入字段相同的下拉列表。最初，如果没有选择任何值，字段名将看起来像占位符，右角有箭头。如果用户单击下拉字段，则需要将字段名设置为标题，下拉列表应打开

我试过了，但我在下拉列表中遇到了一些问题

<form name="pForm" role="form">
<!--Personal Info Col-->    
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.fname.$dirty || pForm.$submitted) && pForm.fname.$invalid }" >

<input class="form-control" type="text" name="aname" ng-model="model.aname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="aname"> Name of Account *</label>    
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.lname.$dirty || pForm.$submitted) && pForm.lname.$invalid }" class="help-block">

<input class="form-control" type="text" name="dname" ng-model="model.dname" required/>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Display Name *</label>
</div>
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.dname.$dirty || pForm.$submitted) && pForm.dname.$invalid}" >

<input class="form-control" type="text" name="acode" ng-model="model.acode" ng-required="true" ng-pattern="/^[A-Za-z0-9_.]*$/" ng-minlength = "1"/> 
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name" for="acode">Account Code *
</label>
</div>
</div>
<div class="row form-row1">
<div class="col-sm-4" ng-class="{ 'has-error': (pForm.caddress.$dirty || pForm.$submitted) && pForm.caddress.$invalid }" class="help-block">         
<!--<select class="form-control select2" name="segment" ng-model="model.segment" ng-options="item for item in segments" style="width: 100%;" required>
<option value class disabled selected>Select</option>                       
</select>-->

<div class="mad-select" class="group" required>
  <ul>
    <li data-value="1">Option 1</li>
    <li data-value="2 foo">Option 2</li>
    <li data-value="3 bar">Option 3</li>
    <li data-value="4">Option 4</li>
    <li data-value="5">Option long desc 5</li>
    <li data-value="6">Option 6</li>
    <li data-value="7">Option 7</li>
    <li data-value="8">Option 8</li>
  </ul>
  <input type="hidden" name="myOptions" value="3 bar">
</div>
<span class="highlight"></span>
<span class="bar"></span>
<label class="control-label l_font field-name">Segment</label>
    /* Script to display dropdown */
<script>
var madSelectHover = 0;
  $(".mad-select").each(function() {
    var $input = $(this).find("input"),
        $ul = $(this).find("> ul"),
        $ulDrop =  $ul.clone().addClass("mad-select-drop");
    $(this)
      .append('<i class="material-icons">arrow_drop_down</i>', $ulDrop)
      .on({
      hover : function() { madSelectHover ^= 1; },
      click : function() { $ulDrop.toggleClass("show"); }
    });
    // PRESELECT
    $ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected");
    // MAKE SELECTED
    $ulDrop.on("click", "li", function(evt) {
      evt.stopPropagation();
      $input.val($(this).data("value")); // Update hidden input value
      $ul.find("li").eq($(this).index()).add(this).addClass("selected")
        .siblings("li").removeClass("selected");
    });
    // UPDATE LIST SCROLL POSITION
    $ul.on("click", function() {
      var liTop = $ulDrop.find("li.selected").position().top;
      $ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop);
    });
  });
  // CLOSE ALL OPNED
  $(document).on("mouseup", function(){
    if(!madSelectHover) $(".mad-select-drop").removeClass("show");
  });    
</script>
</div>

</div>
</div>
</form>



.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid #ccc;
    /* border-radius: 4px; */
    border-top: none;
    border-left: none;
    border-right: none;
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,.075); */
    /* -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; */
    /*-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
}



/* style for input box */
     .group        { 
  position:relative; 
  margin-bottom:45px; 
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;

}
input:focus     { outline:none; }

label          {
  /*color:#999;*/ 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
}

/* active state */
input:focus ~ label, input:valid ~ label     {
    top:-20px;
    font-size:14px;
    color:#333;
    font-weight: 600;
}

.highlight {
  position:absolute;
  height:60%; 
  /*width:100px;*/ 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}

    .field-name {
        left: 15px;
        top: 5px;
    }

    /* ./ style for input box - END ./ */

    /* style for select dropdown box */

    ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0, 0.2);
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0, 0.3);
}

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

body{
  font: 16px/24px Roboto, sans-serif;
  background: #fafafa;
}


/*
MAD-SELECT by Roko CB
*/
.mad-select .material-icons{
  vertical-align: middle;
}
.mad-select{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-right: 8px;
}
.mad-select ul {
  list-style: none;
  display:inline-block;
  margin:0; padding:0;
}
.mad-select li{
  vertical-align: middle;
  white-space: nowrap;
  height:24px;
  line-height:24px;
  display: none;
  padding: 8px 16px;
  margin:0;
  box-sizing: initial;
}
.mad-select > ul:first-of-type{
   max-width:120px; /* COMMENT FOR AUTO WIDTH */
}
.mad-select > ul:first-of-type li.selected{
  display: inline-block;
  height: 24px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mad-select i.material-icons{
  opacity: 0.5;
  margin:0;
  padding:0;
}
/*jQ*/
.mad-select ul.mad-select-drop{
  position: absolute;
  z-index: 9999;
  visibility: hidden; opacity:0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  top: 0;
  left: 0;
  transition: 0.24s;
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
}
.mad-select ul.mad-select-drop.show{
  visibility: visible; opacity: 1;
  max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
}
.mad-select ul.mad-select-drop li{
  display: block;
  transition: background 0.24s;
  cursor: pointer;
}
.mad-select ul.mad-select-drop li.selected{
  background: rgba(0,0,0,0.07);
}
.mad-select ul.mad-select-drop li:hover{
  background: rgba(0,0,0,0.04);
}

    /* ./ style for select dropdown box - END ./ */

帐户名称*
显示名称*
帐户代码*

选项1
选项2
选项3
选项4
选项长描述5
选项6
选项7
选项8

段
/*显示下拉列表的脚本*/
var madSelectHover=0；
$（“.mad select”）。每个（函数（）{
var$input=$（this）.find（“input”），
$ul=$（this.find（“>ul”），
$ulDrop=$ul.clone（）.addClass（“mad选择拖放”）；
$（本）
.append（'arrow\u drop\u down'，$ulDrop）
.在({
hover:function（）{madSelectHover^=1；}，
单击：function（）{$ulDrop.toggleClass（“show”）；}
});
//预选
$ul.add（$ulDrop）.find（“li[数据值=”+$input.val（）+“]”）addClass（“选定”）；
//选定
$ulDrop.on（“单击”、“li”功能（evt）{
evt.stopPropagation（）；
$input.val（$（this.data（“value”））；//更新隐藏的输入值
$ul.find（“li”）.eq（$（this.index（））.add（this.addClass）（“选定”）
.兄弟姐妹（“li”）。removeClass（“选定”）；
});
//更新列表滚动位置
$ul.on（“单击”，函数（）{
var liTop=$ulDrop.find（“li.selected”）.position（）.top；
$ulDrop.scrollTop（liTop+$ulDrop[0].scrollTop）；
});
});
//关闭所有选项
$（document）.on（“mouseup”，function（）{
如果（！madSelectHover）$（“.madselectdrop”）.removeClass（“show”）；
});    
.表格管制{
显示：块；
宽度：100%；
高度：34px；
填充：6px 12px；
字体大小：14px；
线高：1.42857143；
颜色：#555；
背景色：#fff；
背景图像：无；
边框底部：1px实心#ccc；
/*边界半径：4px*/
边界顶部：无；
左边界：无；
边界权：无；
/*-网络工具包盒阴影：插入0 1px 1px rgba（0,0,0,075）*/
/*盒影：插入0 1px 1px rgba（0,0,0,075）*/
/*-webkit过渡：边框颜色缓进缓出.15s，-webkit盒阴影缓进缓出.15s*/
/*-o型过渡：边框颜色缓进缓出.15s，框阴影缓进缓出.15s；
过渡：边框颜色淡入淡出.15s，框阴影淡入淡出.15s*/
}
/*输入框的样式*/
.组{
位置：相对位置；
边缘底部：45像素；
}
输入{
字号：18px；
填充：10px 10px 10px 5px；
显示：块；
宽度：300px；
边界：无；
}
输入：焦点{大纲：无；}
标签{
/*颜色：#999；*/
字号：18px；
字体大小：正常；
位置：绝对位置；
指针事件：无；
左：5px；
顶部：10px；
过渡：0.2s缓解所有；
}
/*活动状态*/
输入：焦点~标签，输入：有效~标签{
顶部：-20px；
字体大小：14px；
颜色：#333；
字号：600；
}
.亮点{
位置：绝对位置；
身高：60%；
/*宽度：100px；*/
最高：25%；
左：0；
指针事件：无；
不透明度：0.5；
}
/*活动状态*/
输入：focus~。突出显示{
动画：inputHighlighter 0.3s轻松；
}
/*动画=*/
@Puthighlighter中的关键帧{
来自{背景：#5264AE；}
到{宽度：0；背景：透明；}
}
.字段名{
左：15px；
顶部：5px；
}
/*/输入框样式-结束。/*/
/*选择下拉框的样式*/
：-webkit滚动条{
宽度：4px；
高度：4px；
}
：-webkit滚动条轨迹{
背景：透明；
}
：-webkit滚动条拇指{
背景色：rgba（0,0,0,0.2）；
边界半径：1px；
}
：-webkit滚动条拇指：悬停{
背景色：rgba（0,0,0,0.3）；
}
*{框大小：边框框；-webkit框大小：边框框；}
html，正文{高度：100%；边距：0；}
身体{
字体：16px/24px Roboto，无衬线；
背景：#fafafa；
}
/*
MAD-SELECT由Roko CB提供
*/
.mad选择.材质图标{
垂直对齐：中间对齐；
}
.疯狂选择{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
边框底部：1px实心rgba（0,0,0,0.12）；
右边填充：8px；
}
.mad select ul{
列表样式：无；
显示：内联块；
边距：0；填充：0；
}
李先生{
垂直对齐：中间对齐；
空白：nowrap；
高度：24px；
线高：24px；
显示：无；
填充：8px 16px；
保证金：0；
盒子尺寸：初始尺寸；
}
.mad select>ul:第一种类型{
最大宽度：120px；/*自动宽度注释*/
}
.mad select>ul:第一种类型li.selected{
显示：内联块；
高度：24px；
最大宽度：计算（100%-24px）；
溢出：隐藏；
文本溢出：省略号；
}
.mad选择i.材质图标{
不透明度：0.5；
保证金：0；
填充：0；
}
/*jQ*/
.mad-select ul.mad-select-drop{
位置：绝对位置；
z指数：9999；
可见性：隐藏；不透明度：0；
背景：#fff；
盒影：0 1px4pRGBA（0,0,0,0.2）；
排名：0；
左：0；
过渡：0.24s；
最大高度：0；
溢出：隐藏；
溢出y：自动；
}
.mad select ul.mad-select-drop.show{
可见性：可见；不透明度：1；
最大高度：160px；/*如果不需要最大高度，请进行注释*/
}
.mad select ul.mad-select-drop li{
显示：块；
过渡：背景0.24s；
光标：指针；
}
.mad select ul.mad-select-drop li.selected{
背景：rgba（0,0,0,0.07）；
}
.mad select ul.mad-select-drop li:悬停{
背景：rgba（0,0,0,0.04）；
}
/*/选择下拉列表的样式
 <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>

var app = angular.module('app', ["ngMaterial"]);