为什么MDCSelect:change在附加所有选项之前调用它时不起作用MDCSelect:change当我在附加列表 之后放置它时正在工作但是 用户界面看起来不太好。
问题:制作方法MDCSelect:change在不损害 ui 外观的情况下工作。
当我对这两行的代码进行洗牌时，它可以完美运行
$('#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>关于javascript - 为什么选择 MDC 选择 :change is not working with javascript for material design，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66685878/