为啥 MDCSelect:change 不能使用 javascript 进行材料设计
Posted
技术标签:
【中文标题】为啥 MDCSelect:change 不能使用 javascript 进行材料设计【英文标题】：Why MDCSelect:change is not working with javascript for material design为什么 MDCSelect:change 不能使用 javascript 进行材料设计 【发布时间】：2021-06-15 13:06:26 【问题描述】：为什么MDCSelect:change 在附加所有选项之前调用它时不起作用
MDCSelect:change 正在工作，当我在添加列表后放置它时 BUT UI 看起来不太好。
问题：如何让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>我还在寻找解决方案，请帮助我提前谢谢！
【问题讨论】：
我还在寻找解决方案，请帮助我，在此先感谢！ 嗨，你得到了Uncaught TypeError: Cannot read property 'length' of undefined，因为select_dropdown里面没有元素
@Swati 这个codepen.io/eabangalore/pen/xxRvREg?editors=1010 工作，但 ui 看起来像这样 ibb.co/vssBpkM 我想要干净的 ui 工作
【参考方案1】：
我从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>【讨论】：
不工作，用户界面仍然很脏，正如 OP 所要求的那样 是的，它工作正常，但我不想要任何默认值。在这种情况下，我们有空值 实际上，如果你查看他们的演示，他们也会使用禁用的空值作为第一个选项。 “状态”不是默认值。它是floating label。如果不需要，请尝试删除 mdc-floating-label 元素。 @ashenmadusanka，非常感谢，我已经兑现了我上面说的话以上是关于为啥 MDCSelect:change 不能使用 javascript 进行材料设计的主要内容，如果未能解决你的问题，请参考以下文章
为啥我不能使用 populateViewHolder 覆盖方法？