Как добавить заголовок в меню пользовательского выбора в jquery mobile

Question

Я использую пользовательское меню выбора в jquery mobile Framework. Читая документы, я обнаружил, что могу добавить заголовок двумя способами -

• Путем добавления data-placeholder = "true" в один вариант(Это работает, но для некоторых меню с меньшим количеством опций, скажем, от 5 до 10)
• Другой вариант использует метку, но он делает весь текст метки заголовком меню выбора.

Но в этом случае я получаю Country*: в качестве заголовка меню выбора, но оно должно быть только Country ... Как я могу это сделать?У кого-нибудь есть идеи?
Вот код, который я пытаюсь ...

<lable for="a1">Country*:</lable>
<select  data-native-menu="false"  id="a1" >
      <option>blah</options>
      </select>

Answer 1

Docs:

• http://jquerymobile.com/demos/1.0rc2/docs/forms/selects/

Варианты заполнителя

Обычно разработчики включают в свой выбор «нулевой» параметр элемент, чтобы заставить пользователя выбрать опцию. Если вариант заполнителя присутствует в вашей разметке, jQuery Mobile скроет их в оверлее меню, показывая пользователю только действительные варианты выбора и отображая заполнитель текста внутри меню в качестве заголовка. Опция-заполнитель добавляется, когда фреймворк находит:

Опция без атрибута значения (или пустого атрибута значения) опция без текстового узла опция с data-placeholder="true" приписывать. (Это позволяет вам использовать параметр, который имеет значение и textnode как опция заполнителя). Вы можете отключить эту функцию через опцию hidePlaceholderMenuItems плагина selectmenu, например это:

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

Похоже, что меньшие списки используют опцию заполнителя, а большие списки используют метку. Это может быть связано с тем, как отображается страница.

Когда у выбора есть небольшое количество опций, которые будут соответствовать Экран устройства, меню будет отображаться в виде небольшого наложения с поп переход.

Когда у него слишком много параметров для отображения на экране устройства, фреймворк автоматически создаст новую "страницу", заполненную стандартный список просмотра для вариантов. Это позволяет нам использовать родной прокрутка включена на устройстве для перемещения по длинному списку. The текст внутри метки используется в качестве заголовка для этой страницы.

Live Пример:

• http://jsfiddle.net/HGBQc/2/

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <span>The No Value Option<pre><code><option>Choose a State...</option>

Ваше состояние: Выберите штат ... Алабама Аляска Аризона Арканзас Калифорния Колорадо Коннектикут Делавэр Флорида Грузия Гавайи Айдахо Иллинойс Индиана Айова Канзас Кентукки Луизиана Мэн Мэриленд Массачусетс Мичиган Миннесота Миссисипи Миссури Montana Небраска Невада Нью-Гэмпшир Нью-Джерси Нью-Мексико Нью-Йорк Северная Каролина Северная Дакота Ohio Оклахома Орегон Пенсильвания Род-Айленд Южная Каролина Южная Дакота Вариант заполнителя <option value="choose-one" data-placeholder="true">Choose one...</option>Ваш штат: Выберите один ... Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Грузия Hawaii Idaho Illinois Indiana Iowa Канзас Kentucky Луизиана Maine Maryland Массачусетс Michigan Миннесота Миссисипи Миссури Montana Nebraska Nevada Нью-Гэмпшир Нью-Джерси Нью-Мексико Нью-Йорк Северная Каролина Северная Дакота Ohio Oklahoma Oregon Пенсильвания Род-Айленд Южная Каролина Южная Дакота Теннесси Texas Юта Vermont Virginia Вашингтон Западная Вирджиния Wisconsin Вайоминг Меньшая опция Способ доставки: Выберите доставку ... Стандарт: 7 дней Раш: 3 дня Экспресс: на следующий день Ночь

Answer 2

В конце концов я добавил вторую метку (#__ label_cboBancoR8), предназначенную для видимого пользователю, и сохранил исходную метку (# label_cboBancoR8) для выбора. Примерно так:

div id='contenedor_cboBancoR8' class='bloque select-opt mb20'>
    <label id='__label_cboBancoR8' class='select'>BANCO</label>
    <label id='label_cboBancoR8' for='cboBancoR8' class='select'>Selecciona tipo de banco</label>
    <select name='cboBancoR8' id='cboBancoR8' data-native-menu='false' data-transition='none'>
    <option value='-1' data-placeholder='true'>Selecciona tipo de banco</option>
    </select>
</div>

Позже мы скрываем оригинальный ярлык:

$('#label_cboBancoR8').hide();

Результат был:

и

Ну ... надеюсь, это поможет кому-то с той же проблемой.