javascriptcsshtmlmobiscroll

Weird button appearing when using mobiscroll multi select with a text field

I have had a slight problem with multi-select. I made a multi-select of days of the week: from Sunday to Saturday. What I receive (I don't know if it's because of Mobiscroll or jQuery-Mobile) is a field, exactly how I wanted it, and an unwanted jQuery-Mobile-looking button. This unwanted button shows me the same days as were chosen in the field: enter image description here

I was trying to get rid of the button with $("​#daysTd d​ i​​v:​​last-child").hide(); but ​it's terribly ugly code, and didn't help either, because the button is only made later on. (The button is made after the whole document loaded).

My code looks like this:

$('#daysSelect').mobiscroll().select({


​​  theme: 'jqm',
​​  display: 'modal',
    animate: 'fade',
    mode: 'scroller',
    inputClass: 'i-txt',
    width: 200
});

<td id="daysTd">
    <select name="Days" id="daysSelect" class="f-dd" multiple>
        <option value="1">Sunday</option>
        <option value="2">Monday</option>
        <option value="3">Tuesday</option>
        <option value="4">Wednesday</option>
        <option value="5">Thursday</option>
        <option value="6">Friday</option>
        <option value="7">Saturday</option>
    </select>
</td>

What I receive after Mobiscroll has done its job is:

enter image description here

Solution

  • From the documentation:

    If you use jQuery Mobile, it automatically enhances the select element on the page, which conflicts with the mobiscroll 'select' preset. To be able to use it, 'data-role="none"' attribute must be set to the select element, to prevent jQuery Mobile enhancement.