如何在jquery mobile的自定义选择菜单中添加标题答案

【问题标题】：How to add title in custom select menu in jquery mobile如何在jquery mobile的自定义选择菜单中添加标题
【发布时间】：2011-12-26 02:25:54
【问题描述】：

我正在使用 jquery 移动框架的自定义选择菜单。在阅读文档时，我发现我可以通过两种方式添加标题-

通过在一个选项中添加 data-placeholder="true"（这可行，但对于选项较少的选择菜单，例如 5 到 10）
另一个是使用标签，但它使标签的整个文本作为选择菜单的标题..

但在这种情况下，我将Country*: 作为选择菜单的标题，但它应该只是Country... 我怎样才能做到这一点？有人知道吗？
这是我正在尝试的代码...

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

【问题讨论】：

我很想知道标签是否作为选择菜单的标题出现，因为我只是尝试了一个示例，但标签没有作为标题出现。您能否发布代码示例在这里。

标签： jquery jquery-mobile

【解决方案1】：

文档：

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

占位符选项

开发人员在他们的选择中包含“null”选项是很常见的元素强制用户选择一个选项。如果占位符选项存在于您的标记中，jQuery Mobile 会将它们隐藏在叠加层中菜单，只向用户显示有效的选择，并显示菜单内的占位符文本作为标题。占位符选项是框架找到时添加：

没有值属性（或空值属性）的选项没有文本节点的选项带有data-placeholder="true" 的选项属性。（这允许您使用具有值和 textnode 作为占位符选项）。您可以禁用此功能通过 selectmenu 插件的 hidePlaceholderMenuItems 选项，比如这个：

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

看起来较小的列表使用占位符选项，而较大的列表使用标签。这可能与页面的显示方式有关。

When the select has a small number of options that will fit on the 设备的屏幕上，菜单将显示为带有弹出窗口的小覆盖过渡。

当设备屏幕上显示的选项过多时，框架将自动创建一个新的“页面”填充选项的标准列表视图。这允许我们使用原生设备上包含滚动功能，用于在长列表中移动。 该标签内的文本用作此页面的标题。

现场示例：

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></code></pre></span><br />
        <label for="select-choice-1" class="select">Your state:</label>
            <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
                <option>Choose a State...</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
            </select>


        <br />

        <span>The Placeholder Option<pre><code><option value="choose-one" data-placeholder="true">Choose one...</option></code></pre></span><br />
        <label for="select-choice-3" class="select">Your state:</label>
            <select name="select-choice-3" id="select-choice-3" data-native-menu="false">
                <option value="choose-one" data-placeholder="true">Choose one...</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
            </select>

        <br />
        <span>Smaller Option</span><br />
        <label for="select-choice-6" class="select">Shipping method:</label>
        <select name="select-choice-6" id="select-choice-6" data-native-menu="false">
            <option value="choose-one" data-placeholder="true">Choose shipping...</option>
            <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>
</div>

【讨论】：

When the select has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition.当设备屏幕上显示的选项太多时，框架将自动创建一个新的“页面”，其中填充了选项的标准列表视图。这允许我们使用设备中包含的本机滚动来移动长列表。标签内的文本用作此页面的标题。

【解决方案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();

结果是：

和

嗯...希望对遇到同样问题的人有所帮助。

【讨论】：