Select inside a button does not work in Firefox

I have a select inside button like so:

<button type="button" class="btn btn-primary"
                id="l_ns"
                data-toggle="button">
                Choose the N to be stage
        <select  id='n_selector'
                 class="btn btn-primary"
                 data-toggle="dropdown"
                 rel="tooltip"
                 data-placement="right"
                 aria-labelledby="dropdownMenun"
                 title="Choose the N to be staged"
                 data-bind="options: available_ns,
                    optionsCaption: 'Select...',
                    value: current_n,
                    event: { change: tnmChanged }">
        </select>
        </button>

Chromium works normally, however in Firefox it does not load select values. When I remove the select from inside the button it loads the values, but with centralized alignment. Any tips?

Thank you