javascript - 为什么选择 MDC 选择 :change is not working with javascript for material design-6ren

javascript - 为什么选择 MDC 选择 :change is not working with javascript for material design

转载作者：行者123 更新时间：2023-12-03 13:40:23

为什么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/

文章推荐： javascript - 如何测试 ErrorBoundary 的后备组件？

文章推荐： python - sqlalchemy 关闭所有连接

文章推荐： math - 四舍五入到最接近的 10 次方

mdc-components - MDC 自动实例化
我目前正在使用“手动实例化”方法，效果很好。我注意到“自动实例化”方法，但无法使其工作。使用这种方法到底需要什么？当我使用代码时: mdc.tabs.MDCTabBar.attachTo(doc
Java MDC 记录器 - MDC.put() 过多的方法
请问有关使用 Java 的 MDC 的小问题。起初，我有非常简单的方法，一些方法有很多参数(为了这个问题我缩短了参数列表以保持简短，但请想象很多参数) public String invokeMe
mdc-components - MDC Web 组件 - 从文本字段停用焦点不起作用
我正在尝试使用 mdc 网络组件实现自动完成输入。我有一个菜单选择事件监听器，我想在其中停用文本字段上的焦点。我已经尝试使用 MDCTextFieldFoundation deactivateFocu
css - mdc-fab背景 mdc-theme-secondary
在我的 Head 标签中包含以下内容 :root { --mdc-theme-primary: #64ba69; --mdc-theme--primary-light: #96ed98; --mdc
mdc-components - 如何在 lit 元素中使用 MDC 组件？
我正在尝试在 lit 元素中使用 mdc-component(比如 mdc-textfield)。看起来我必须将 css 和 js 文件都导入到元素中。我不确定如何将 css 导入到 lit-ele
javascript - MDC 网络组件 : mdc-dialog doesn't close properly sometimes
我使用 MDC-Web 组件。我以编程方式打开和关闭对话框，但有时它不会关闭。我不知道我是否以正确的方式关闭对话框。 closeDialog('dialog_gui'); function close
Angular-MDC 返回 "No mixin named mdc-top-app-bar-fill-color"
所以，我正在使用 AngularCLI 和 Angular-MDC，我想使用 styles.scss 的第二种颜色。现场有https://trimox.github.io/angular-mdc-we
javascript - MDC 网站 : mdc-select update hidden input value on change (non-native select box) | JavaScript (JS)
到目前为止，MDC Web Components 的表现不错，但我在这里停滞的时间太长了。 (JS不强) mdc-select 以前是非原生的，然后是原生的 HTML select，现在又是非原生的。
java - MDC 只用于日志记录吗？
我知道MDC是由Log4j提供的，用于将相关日志消息分组在一起，以便于调试。但是，MDC 只能用于此目的吗？如果我使用 MDC 在执行线程中保存小型业务信息，这是否被认为是一种不好的做法？？最佳
java - MDC 值未传递给请求
我希望每个应用程序都有一个单独的日志文件，同时只使用一个 logback.xml 文件。因此我使用的是 SiftingAppender . 每个应用程序都有自己的 WebApplicationInit
html - MDC-Web对话框宽度
Material 设计对话框 guidelines不解决平板电脑或桌面大小视口(viewport)上的对话框宽度。我在某处读到应该使用 56px 的增量，但不知道这是否是共识。我的对话框需要的 HT
html - MDC 网格布局不会根据设备更改
在尝试实现网格布局时，当我提供特定于设备的单元格跨度值时，例如“mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-de
Springboot+MDC+traceId日志中打印唯一traceId
目录 1. 为什么需要这个traceId 2.通过MDC设置traceId 2.1 使用filter过滤器设置traceId 2.2
logging - MDC 不适用于 SLF4J
我们使用 SLF4J(使用 log4j)作为我们的日志框架。我们正在尝试利用 Log4j 支持的在线文档的 MDC 功能。使用 SLF4J 时 MDC 不起作用。但是，当使用 log4j 时，它工作
html - 更改 MDC 按钮的容器填充颜色
如何在不使用 SASS mixins 的情况下更改 MDC 按钮的容器颜色，如 here 所述.指定的实际等效 CSS 是什么？我尝试了以下方法: .mdc-button:after, .mdc-b
javascript - MDC-web 未按预期工作
import React, { Component } from "react"; import { MDCTextfield, MDCTextfieldFoundation } from "@mat
javascript - 单击第一个菜单项后防止 MDC 菜单关闭
我们正在使用 MDC 菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。我尝试将一个类应用到 mdc-list-item 并将光标指定为自动，但它不起作用。 .menu-do-not-
java - SLF4J MDC 内存泄漏
我为此搜索了谷歌，查看了多项建议，但似乎无济于事。我有一个使用 MDC 的 JAX-RS 应用程序，当一个端点被命中时设置一个 transactionId 以使调试更容易。但是，当我停止或重新启动
java - 设计失败，MDC 滥用
我必须接管一个包含多个层、服务和组件的巨型整体。当我浏览代码时，我首先意识到的是 MDC 的使用. 一些例子: public void setContextOrderId(String orderI
java - SLF4J MDC 的替代方案
我正在尝试记录在我的 JSF 应用程序中发起每个请求的用户名，但显然 MDC on a web app server (thread pool) is risky . 在使用 EJB @Asynchr

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么选择 MDC 选择 :change is not working with javascript for material design