使用jquery mobile创建动态下拉列表

Posted

技术标签:

【中文标题】使用jquery mobile创建动态下拉列表【英文标题】:dynamic dropdown creation using jquery mobile 【发布时间】:2013-11-07 02:37:26 【问题描述】:

当我使用 jquery mobile 创建下拉列表时,以下代码不起作用

   $(function()
      $('#hello').append('<select id="myselect" data-native-menu="false">'+
     ' <option>1</option>'+
     '<option>2</option>'+
     '<option>3</option>'+
     '<option>4</option>'+
     '<option>5</option>'+
     '<option>6</option>'+
     '</select>'+
     '<div id="keyOpen" style="background-color: blue;"></div>'+
     '<div id="keyClose"></div>');

     $( "#myselect" ).selectmenu( "refresh" );
     $(document).keyup(function(e)
     if(e.which >= 48 && e.which <= 57)
     $("#myselect").selectmenu( "open" );//this should open the select
     $("#keyOpen").empty().text(e.which);
     else if(e.which >= 58 && e.which <= 90)
     $("#myselect").selectmenu( "close" );//this should close the select
     $("#keyClose").empty().text(e.which);
     
     );
    ); 

当我将代码放在正文中时,相同的代码可以正常工作

工作代码:

   <select id="myselect" data-native-menu="false">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
     <option>6</option>
  </select>
  <div id="keyOpen" style="background-color: blue;"></div>
  <div id="keyClose"></div>

【问题讨论】:

到底是什么问题?你能创建一个 jsFiddle 吗? 【参考方案1】:

仅在对现有 select 进行修改时使用 $(".selector").selectmenu("refresh")

每当您附加一个新的select 时,请使用$(".selector").selectmenu(); 来增强它。

Demo

【讨论】:

以上是关于使用jquery mobile创建动态下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

如何使用自定义类一次重置 jquery mobile 中的多个下拉列表

Jquery mobile 下拉刷新 怎么弄

当每个下拉列表动态创建ID时,jquery选择选项数据和值[关闭]

如何在 Jquery 中为动态下拉列表创建循环?

动态创建多个下拉列表

JQuery Mobile - 隐藏下拉选项