BootstrapでValueつきDropdown

##例

HTML

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" id="gender" type="button" data-toggle="dropdown">
            性別
        </button>
        <div class="dropdown-menu">
            <button class="dropdown-item" value="male">男性</button>
            <button class="dropdown-item" value="female">女性</button>
        </div>
</div>

Javascript

$(function () {
    $('.dropdown-menu .dropdown-item').click(function () {
        var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
        visibleItem.text($(this).text());
        visibleItem.attr('value', $(this).attr('value'))
    });
});

項目はdropdown-menu以下に追加してください。

選択項目をJavascriptで取得する場合は
上の例だと

$("#gender").attr('value')//value
$("#gender").text()//text

で取得できます。

参考

Bootstrap4ドロップダウンで選択した項目をボタンに表示したい！