0

抱歉，如果再次询问，但我的搜索没有解决我的问题。

我有这个 JS

$(function(){  
      $("#selectmenu4").change(function(){

          var DropdownValue =$(this).val();
             if(DropdownValue=='Create New'){
                  var OtherData=prompt("Enter Other Category!","");
                        if(OtherData){
                            $("#selectmenu4").append("<option value="+OtherData+" >"+OtherData+"</option>");
                            $("#categoriesReport").append("<input type='checkbox' name='"+OtherData+"' id='"+OtherData+"' value='"+OtherData+"'><label for='"+OtherData+"'>"+OtherData+"</label>")
                            options[options.length]=OtherData;

                        }
                    }
            });

        });

基本上是一个动态添加新选项到选择菜单的函数。如何将其prompt转换为 jquery mobile 的对话框？任何帮助将不胜感激！

4

1 回答 1

1

我会为此使用 jQuery Mobile Popup 小部件。

这是一个演示： http: //jsfiddle.net/ezanker/CfAa8/1/下面是解释：

在 data-role=page 中添加弹出标记（模仿提示）：

<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
         <h1>Create New</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Please enter a new category name</h3>
        <input type="text" name="newCat" id="newCat" value="" placeholder="category" />
        <a id="btnCancel" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
        <a id="btnOK" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" >OK</a>
    </div>
</div>

然后在选择更改时，如果选择了新建，则启动弹出窗口：

$(document).on('change', '#selectmenu4', function () {
    var DropdownValue = $(this).val()
    if (DropdownValue == 'create') {
        $("#popupDialog").popup("open");
    }
});

最后添加 OK 和 Cancel 按钮点击事件以响应用户输入：

$(document).on('click', '#btnOK', function () {
    var cat = $('#newCat').val().trim();
    if (cat && cat.length > 0) {
        alert(cat);
        //add options here then clear field
        $('#newCat').val('');
    }
});

$(document).on('click', '#btnCancel', function () {
    $('#newCat').val(''); //clear new category field on cancel
});
于 2013-11-14T21:36:08.120 回答