| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>query-values-sk</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <style type="text/css" media="screen"> |
| query-values-sk multi-select-sk { |
| max-height: 4em; |
| overflow-y: scroll; |
| } |
| </style> |
| </head> |
| <body> |
| <query-values-sk></query-values-sk> |
| <div> |
| <button id=change>Change</button> |
| </div> |
| <h2>Events</h2> |
| <pre id=events></pre> |
| <script type="text/javascript" charset="utf-8"> |
| let q = document.querySelector('query-values-sk'); |
| let b = document.querySelector('#change'); |
| q.addEventListener('query-values-changed', (e) => { |
| document.querySelector('#events').textContent = JSON.stringify(e.detail, null, ' '); |
| }) |
| |
| const long_options =[ |
| "565", |
| "8888", |
| "opt3", |
| "opt4", |
| "opt5", |
| "opt6", |
| "opt7", |
| "opt8", |
| "opt9", |
| "opt10", |
| ]; |
| q.options = long_options; |
| q.selected = ["!565"]; |
| |
| let n = 0; |
| b.addEventListener('click', (e) =>{ |
| n = (n + 1) % 3; |
| switch(n) { |
| case 0: |
| q.options = long_options; |
| q.selected = ["!565"]; |
| break; |
| case 1: |
| q.options = ["x86", "arm"]; |
| q.selected = ["~ar"]; |
| break; |
| case 2: |
| q.options = ["x86", "arm"]; |
| q.selected = ["arm"]; |
| break; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
