Question

So multi-select boxes aren’t the nicest inputs to work with in the word, but they can sometimes be good. In my case for jQuery mobile they create a dialog box that overlays the page with all the options the user can select.

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1" multiple="multiple">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

Ok now the issue I am having is that I need to add a close button on the bottom of this because the list is dynamically populated can get very long for a mobile page. With only a close button at the top it’s not very good. Is there a way to append a footer to the dialog box created with multiselect? I can’t seem to find this in the jQM API.

Answer 1

Not unless you want to go crazy editing their CSS. That being said, you could add Close as an option, then trigger the dialog close method if it is clicked:

http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/selects/methods.html