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;

                        }
                    }
            });

        });

基本的に、selectmenu に新しいオプションを動的に追加する関数です。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] ボタンと [キャンセル] ボタンのクリックのイベントを追加して、ユーザー入力に応答します。

$(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 に答える