Menu
Why MDCSelect:change is not working when i call it before appending all options
MDCSelect:change is working when i put it after appending list BUT UI does not look good.
Question: How to make MDCSelect:change to working without harming ui look.
It works perfectly when i shuffle the code of those 2 lines
$('#select_dropdown').html(usersStr);
initializeSelect();
With the above code select UI does not look good when you click outside anywhere or simply
for a better view, I have created codepen here: 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>Still i'm looking for solution, please help me thanks in advance!!
524
MDC Select provides Material Design single-option select menus, using the MDC menu. The Select component is fully accessible, and supports RTL rendering. The select uses an MDCMenu component instance to contain the list of options, but uses the data-value attribute instead of value to represent the options' values.
The new syntax is the only one supported: .materialSelect () Bjenk Ellefsen commented 2 years ago Yes, I am using 4.8.11 and I am using the materialSelect () call. I am having the same problem as here.
If your JavaScript code is not working, the first thing you should do is check the <script> tag. When you include JavaScript in your HTML document with the <script> tag, many things can (and often do) go wrong. And, to avoid chasing a red herring, it’s best to rule them out before looking for other possible causes.
However, for optimal results, we recommend consuming MDC Web's ES2015 modules and Sass directly. This is outlined in the steps below. This section walks through how to install MDC Web Node modules, and bundle the Sass and JavaScript from those Node modules in your webpack configuration.
I've got the idea from this 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
