如何解决为什么 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。