Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have an issue when I'm trying to use a select in a JQM listview.

I have a listview to list a couple of computers and in every listitem the user are able to make some changes to the computers via dropdownlists.

Here is the result: JQM issue

I'm using knockoutjs to bind viewModels to the view.

Here is my listview:

<div data-role="page" id="page1">
<div data-role="content">
    <ul id="editComputerList" data-role="listview" data-inset="true">
        <li data-role="list-divider">
            <div class="row">
                <div class="column">
                    PC
                </div>
                <div class="column">
                    Lokasjon
                </div>
                <div class="column">
                    OS
                </div>
                <div class="column-last">
                    Språk
                </div>
            </div>
        </li>
        <!-- ko foreach: Computers -->
        <li>
            <div class="row">
                <div class="column" data-bind="text: Name">
                </div>
                <div class="column">
                    <select data-bind="value: Location, options: $root.Locations, optionsText: 'Name', optionsValue: 'Value'">
                    </select>
                </div>
                <div class="column">
                    <select data-bind="value: OsParameter, options: $root.OsParameters, optionsText: 'Name', optionsValue: 'Value'">
                    </select>
                </div>
                <div class="column-last">
                    <select data-bind="value: Language, options: $root.Languages, optionsText: 'Name', optionsValue: 'Value'">
                    </select>
                </div>
            </div>
        </li>
        <!-- /ko -->
    </ul>
</div>
</div>

And here am I binding the model to the view:

var viewModel = new pageViewModel();
ko.applyBindings(viewModel, document.getElementById("page1"));


$("#editComputerList", "#page1").listview("refresh");
$('#editComputerList select').selectmenu();
$('#editComputerList select').selectmenu('refresh', true);

Code can be seen here: http://jsfiddle.net/dankli/7hJ5d/

Does anyone have an idea of what I'm doing wrong or is it a bug in JQM?

share|improve this question

1 Answer

I fixed this issue by setting data-role="none" on the select.

<select data-role="none" ...></select>

But I don't know if that is the way to go.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.