Question

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

通过在一个选项中添加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

文档：

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

占位符选项

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

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

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

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

当select具有少量适合的选项时   设备的屏幕，菜单将显示为带有弹出窗口的小覆盖   过渡。

如果有太多选项要显示在设备的屏幕上，那么   框架将自动创建一个填充了一个新的“页面”   选项的标准列表视图。这允许我们使用原生   滚动包含在设备上以通过长列表移动。的的   标签内的文字用作此页面的标题。

直播示例：

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>

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();

结果是：

和

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

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

2 个答案: