Question

当用户在jQuery mobile中点击同一行时，能告诉我如何用两个相同的选项进行屏幕显示。我正在制作一个演示，其中我有一个按钮（添加游戏）点击按钮它变为禁用并在列表中添加两个选项（添加游戏，游戏名称）。如果用户点击添加游戏（1选项它再次显示两个选项）屏幕添加游戏，游戏名称）如果用户选择第一个选项，它将进入下一个屏幕，有两个选项。如果用户选择第二个选项，它会随时显示下拉框（下拉）。从下拉列表中选择任何值创建一行那个。？

图表..

          ADD GAME(button)
           |
       (disable button)
        ADD GAME
        GAME NAME
          |
  Go to new screen with two option
        ADD GAME
        GAME NAME
          |
it will display this if user select first option..

如果用户选择第二个选项，则显示下拉列表并在.list中添加游戏名称的值 http://jsfiddle.net/gQnBW/1/

$(document).ready(function(){

    $('#addGame').click(function(){

         $(this).addClass('ui-disabled');
$("#listview").append("<li>Add Game</li>"); 
        $("#listview").append("<li>Game Name</li>"); 
         $("#listview").listview("refresh");

    }) 

})

Answer 1

更新了这一点，现在一切正常，但下拉选择器没有正确设置样式。

HTML

<div data-role="page">


<a  data-role="button" class="addGame">Add Game</a>

            <ul id='listview' data-role='listview' data-inset='true'></ul>

</div>

CSS

.ui-hidden{
    display:none !important;
}

JS

$(document).ready(function(){

    var gameSelector = '<li id="chooseGame"><span></span><select name="select-choice-0" id="select-choice-1" > <option value="Default">Select a Game</option><option value="GAME 1">GAME 1</option> <option value="GAME 2">GAME 2</option> <option value="GAME 3">GAME 3</option> <option value="GAME 4">GAME 4</option>  </select></li>'

    $(document).on('click', '.addGame', function(){

        $(this).addClass('ui-hidden');
        $("#listview").append(gameSelector); 
        $("#listview").append("<li class='addGame'>Add Game</li>"); 
        $("#listview").listview("refresh");

    }); 

    $(document).on('click', '.changeGame', function(){

        $(this).parent().append(gameSelector); 
        $(this).remove();
       $("#listview").listview("refresh");

    });     

    $(document).on('change', '#select-choice-1', function(){

         var gamename = $('#select-choice-1').val();
         $(this).parent().append("<li class='changeGame'>"+gamename+"</li>");
        $(this).remove();
       $("#listview").listview("refresh");

    }); 



});

新小提琴http://jsfiddle.net/4gHJ2/

如何一次又一次地显示两个选项的屏幕？

1 个答案: