jQuery Mobile:选择菜单中的空选项问题(下拉列表)

时间:2012-07-03 06:07:07

标签: javascript android jquery-mobile cordova

我已在 jQuery Mobile. 中实施下拉列表选择菜单

    <div data-role="fieldcontain">
          <label for="name" class="select ui-select" style ="vertical-align:baseline; width:33%; " ><b>Application:</b></label>
          <select name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >

          <option value="EmptyOption">"  "</option> <!--EMPTY OPTION-->
          <option value="Other">Other</option>
          <option value="Other2">Other2</option>
          <option value="Other3">Other 3</option>


          </select>
    </div>

所有选项都显示在下拉列表中,但是标签的对齐问题。

我现在使用 vertical-align:baseline 。我也尝试了其他对齐属性。

在EMPTY OPTION的情况下,与其他选项相比,标签的位置会更改为

我的应用程序中有很多选择菜单都存在同样的问题。

某些选择菜单没有任何强烈的文字,这些也有同样的问题。

<div data-role="fieldcontain">
      <label for="name" class="select ui-select" style ="vertical-align:baseline; width:33%; " ><b>Application:</b></label>
      <select name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >
           <!--NO OPTIONS-->
      </select>
</div>

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

在标签的for属性中,您应该加入所选内容的id(您当前拥有"name"

<div data-role="fieldcontain">
          <label for="editWSAppType" class="select ui-select"  ><b>Application:</b></label>
          <select  name="select_choice" data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-hover-c" id="editWSAppType" >

          <option value="EmptyOption"></option> <!--EMPTY OPTION-->
          <option value="Other">Other</option>
          <option value="Other2">Other2</option>
          <option value="Other3">Other 3</option>


          </select>
    </div>