How To Set Material Design List To Behave Like Getmdl-select Dropdown (respond To Keyboard Arrows And Tab)
The standard material design select list (dropdown) support accessibility. I can get to the dropdown with a TAB (keyboard), navigate the list items with the arrows (keyboard) and b
Solution 1:
Dynamically usage For dynamically usage, you must add getmdlSelect.init(cssSelector) in javascript code, (where cssSelector, for example, is ".getmdl-select" or "#mySelect"), after new item is created or any new element added to existing list.
Pre-selected item To set pre-selected value add data-selected="true" attribute to corresponding li in your list
PLEASE READ from this site : https://github.com/CreativeIT/getmdl-select
Example
after you get data and input value after that add like this
$('ul[for="xxx_field_name"] li[data-val="'+xxx_value+'"]').attr('data-selected',true);
getmdlSelect.init('.getmdl-select');
it work for me! good luck :)
Post a Comment for "How To Set Material Design List To Behave Like Getmdl-select Dropdown (respond To Keyboard Arrows And Tab)"