dropdown（下拉框）

开启鼠标移入打开下拉列表鼠标移出关闭下拉列表功能

{{value}}

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script type="text/javascript">
            require('dropdown/avalon.dropdown.js', function() {
                avalon.ready(function() {
                    avalon.define('dropdown', function(vm) {
                        vm.value = 'value5';
                        vm.dropdown = {
                            hoverAutoShow: true,
                            onChange: function() {
                                console.log(dm.value)
                            },
                            onSelect: function() {
                                console.log(dm.value)
                            }
                        }
                    });
                    avalon.scan();
                });
            });
        </script>
    </head>
    <body>
    <div class="frame" ms-controller="dropdown">
        <h2>dropdown（下拉框）</h2>
        <p>使用html配置并使用duplex绑定</p>
        <select ms-widget="dropdown"
                ms-duplex="value">
            <optgroup label="group1">
                <option value="value1">Value 1</option>
                <option>textValue</option>
                <option label="label" value="labelValue">with label</option>
                <option value="value2" selected>Value 2</option>
                <option value="value3">Value 3</option>
            </optgroup>
            <optgroup label="group2">
                <option value="value4">Value 4</option>
                <option value="value5" disabled>Value 5</option>
                <option value="value6">Value 6</option>
            </optgroup>
        </select>
        <p>{{value}}</p>
    </div>
    </body>
    </html>