2017-01-12 2 views
1

jquery-confirmがあり、selectを持つコンテンツを表示しようとしていますが、select.selectMenu()がjquery-confirm内に表示されているため動作しません。これはデフォルトのselectを表示しているだけです。スコープの外のselectで簡単に.selectMenu()を呼び出すことができ、selectからselectmenuに変更されます。例:jQuery内に表示選択メニューを表示

HTML:

<div id="aDiv"> 
    <select id="aSelect"> <option value="1"> 1 </option></select> 
</div> 
<button type="button" id="aButton">Click </button> 

CSS:

#aDiv { 
    display: none; 
} 

JS:

どのように私はselectmenuのようなjqueryの-確認ショーのjQuery UIウィジェットを作るのですか?

答えて

1

ためを見逃しているのより良い、あなたはjconfirm内のHTMLマークアップを追加し、selectMenuプラグインを初期化する必要があり、これを試してみてください外部に定義するのではなく、コンテンツ内にマークアップを書き込むことができます。

$(document).ready(function() { 
    // $('#aSelect').selectMenu(); 
    $('#aButton').on("click", function() { 
     $.confirm({ 
      title: 'Hello', 
      content: function(){ 
       return $('#aDiv').html(); // put in the #aSelect html, 
      }, 
      onContentReady : function() { 
       this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens. 
      }, 
      onClose : function() { 

      } 
     }); 
    }); 
}); 
+0

それは多少働いた編集が、今私は新しい問題を抱えています。プルダウンメニューはjqueryコンテンツウィンドウの後ろにあります。http://imgur.com/a/ayoJzをご覧ください。またselectMenu()は.selectmenu()である必要があります。 – jones

+0

私は多分 '.ui-selectmenu-menu { \t \t z-index:9999; \t \t} 'はCSSで問題を解決できますが、私は間違っていました。うまくいきませんでした。 – jones

+0

jquery-confirm $ .confirmウィンドウのz-indexを取得するにはどうすればよいですか? – jones

1

次のことを試してください:

あなたはID

$(document).ready(function() { 
    $('#aSelect').selectMenu(); 
    var divVar = $('#aDiv'); 
    $('#aButton').on("click", function() { 
     $.confirm({ 
      title: 'Hello', 
      content: '', 
      onOpen : function() { 
       divVar.show(); 
       this.setContent(divVar); 
      }, 
      onClose : function() { 
       divVar.hide(); 
      } 

     }); 
    }); 
});  
+0

を例に「#」を追加するのを忘れ、私は私の元のコードでそれらをした、質問 – jones

関連する問題