メニュー：値の選択

Menuコントロールは、簡単な値ピッカーとして使用することができます。MenuコントロールはComboBoxコントロールの拡張なので、ComboBoxと同様に、コントロールのselectedValueプロパティに変数を連結できます。

例：ここでは、selectedIndexChangedイベントを使用してメニューのヘッダーを更新し、現在の値を表示しています。

HTML

<div id="valuePicker"></div>

JavaScript

import * as input from '@mescius/wijmo.input';

function init() {
    var valuePicker = new wijmo.input.Menu('#valuePicker', {
        // ヘッダーを更新して、現在の選択内容を表示します
        selectedIndexChanged: (sender) => {
            if (sender.selectedIndex > -1) {
                sender.header = `税率: <b>${sender.selectedItem.header}</b>`;
            }
        },
        //
        // selectedIndexChangedイベントを捕捉したらメニューを設定します
        displayMemberPath: 'header',
        selectedValuePath: 'value',
        itemsSource: [
            { header: 'なし', value: 0 },
            { header: '3%', value: 0.01 },
            { header: '5%', value: 0.05 },
            { header: '8%', value: 0.08 },
            { header: '10%', value: 0.10 }
        ],
        selectedValue: 0.08
    });
}

メニュー：値の選択
HTML
JavaScript