为什么 MDCSelect:change 不适用于材料设计的 javascript

问题描述

当我在附加所有选项之前调用它时，为什么 MDCSelect:change 不起作用

MDCSelect:change 在附加列表后放置时正在工作但是 UI 看起来不太好。

问题：如何在不损害用户界面外观的情况下使 MDCSelect:change 正常工作。

当我洗牌那两行的代码时，它工作得很好

$('#select_dropdown').html(useRSStr);

initializeSelect();

使用上面的代码 select UI 在您点击外面的任何地方或只是简单地点击时都不好看

为了更好的查看，我在这里创建了 codepen：https://codepen.io/eabangalore/pen/poNmBpm?editors=1010

var selectBoxMap = {};
function initializeSelect(){
       var mdcSelectList = document.querySelectorAll(' .mdc-select');
        if(mdcSelectList){
            [].forEach.call(mdcSelectList,function(el){
                var select = new mdc.select.MDCSelect(el);
                el.setAttribute('ripple-attached',true);
                var dropDownId = $(el).find('ul.mdc-list').attr('id');
                selectBoxMap[dropDownId] = select;
            });
        }

}


$(async function(){

  var results = await $.get('https://jsonplaceholder.typicode.com/users');
var useRSStr = '';
for(var i = 0; i < results.length; i++){
    var item = results[i];
           useRSStr += `<li class="mdc-list-item" data-id="${item.id}" role="option">
                              <span class="mdc-list-item__ripple"></span>
                              <span class="mdc-list-item__text" data-id="${item.id}">
                                  ${item.name}
                              </span>
                          </li>`
}

initializeSelect();

$('#select_dropdown').html(useRSStr);

     for(var key in selectBoxMap){
            if(selectBoxMap[key]){
              selectBoxMap[key].listen('MDCSelect:change',(e) => {
                  alert('dropdown changed');
              });
            }
        }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

</head>


<!-- select dropdown -->

 <div class="mdc-select mdc-select--filled demo-width-class">
         <div class="mdc-select__anchor" role="button" aria-haspopup="listBox" aria-expanded="false">
                      <span class="mdc-select__ripple"></span>
                      <span class="mdc-floating-label">Status</span>
                      <span class="mdc-select__selected-text-container">
                        <span id="" class="mdc-select__selected-text"></span>
                      </span>
                      <span class="mdc-select__dropdown-icon">
                          <span class="mdc-select__dropdown-icon-inactive material-icons">arrow_drop_down</span>
                          <span class="mdc-select__dropdown-icon-active material-icons">arrow_drop_up</span>
                      </span>
                      <span class="mdc-line-ripple"></span>
                    </div>
                  
                    <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
                      <ul class="mdc-list" id="select_dropdown"  role="listBox" aria-label="listBox">

                      </ul>
          </div>
   </div>

我仍在寻找解决方案，请提前帮助我谢谢！！

解决方法

我从这个link

得到了这个想法

var selectBoxMap = {};
function initializeSelect(){
       var mdcSelectList = document.querySelectorAll(' .mdc-select');
        if(mdcSelectList){
            [].forEach.call(mdcSelectList,function(el){
                var select = new mdc.select.MDCSelect(el);
                el.setAttribute('ripple-attached',true);
                var dropDownId = $(el).find('ul.mdc-list').attr('id');
                selectBoxMap[dropDownId] = select;
            });
        }

}


$(async function(){

  var results = await $.get('https://jsonplaceholder.typicode.com/users');
var usersStr = '';
for(var i = 0; i < results.length; i++){
    var item = results[i];
           usersStr = `<li class="mdc-list-item" aria-selected="false" data-value=" ${item.name}" role="option">
                        <span class="mdc-list-item__ripple"></span>
                        <span class="mdc-list-item__text">
                          ${item.name}
                        </span>
                    </li>`;
                $('#select_dropdown').append(usersStr);
}

initializeSelect();



     for(var key in selectBoxMap){
            if(selectBoxMap[key]){
              selectBoxMap[key].listen('MDCSelect:change',(e) => {
                  alert('dropdown changed');
              });
            }
        }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

</head>


<!-- select dropdown -->

 <div class="mdc-select mdc-select--filled demo-width-class">
         <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-expanded="false">
                      <span class="mdc-select__ripple"></span>
                      <span class="mdc-floating-label">Status</span>
                      <span class="mdc-select__selected-text-container">
                        <span id="" class="mdc-select__selected-text"></span>
                      </span>
                      <span class="mdc-select__dropdown-icon">
                          <span class="mdc-select__dropdown-icon-inactive material-icons">arrow_drop_down</span>
                          <span class="mdc-select__dropdown-icon-active material-icons">arrow_drop_up</span>
                      </span>
                      <span class="mdc-line-ripple"></span>
                    </div>
                  
                    <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
                      <ul class="mdc-list" id="select_dropdown"  role="listbox" aria-label="listbox">
          
                      </ul>
          </div>
   </div>

html javascript jquery material-design mdc-components

为什么 MDCSelect:change 不适用于材料设计的 javascript

问题描述

解决方法

相关问答