Jquery UIダイアログボックスを使用して変数を設定し、それにアクセスする

Question

これは私が達成しようとしているものですが、それは私に「未定義」を与え、ダイアログボックスを開く前にトリガされます。

$(".shipment_refund").click(function (e) { 
    e.preventDefault(); 
    var sel_option; 
    var dialog = $('<p>Are you sure you want to refund this shipment? If yes then</p>').dialog({ 
      buttons: { 
        "With Shipment fee?": function() {sel_option = 1;}, 
        "Without Shipment fee?": function() {sel_option = 0;}, 
        "Cancel": function() {        
          dialog.dialog('close'); 
        } 
      } 
    }); 
    alert(sel_option); 
}); 

Answer 1

それはこれはあなたのために働く必要がありますので、

$(".shipment_refund").click(function (e) { 
     e.preventDefault(); 
     var sel_option; 
     var dialog = $('<p>Are you sure you want to refund this shipment? If yes then</p>').dialog({ 
       buttons: { 
         "With Shipment fee?": function() {sel_option.val(1);}, 
         "Without Shipment fee?": function() {sel_option.val(0);}, 
         "Cancel": function() {        
           dialog.dialog('close'); 
         } 
       } 
     }); 
     alert(sel_option); 
    }); 

Answer 2

希望に動作します、これを試してみてください。

私はjsFiddleを作成しました。あなたもレビューできます。

EDIT：機能を追加するにはadjustを、ダイアログボックスでユーザーが選択した値を返すにはボタンを押します。

$(document).ready(function(){ 
 
\t var choice; 
 
    function doSomething (x) { 
 
\t if(x != null) { 
 
    \t  return x; 
 
     } 
 
    } 
 
    \t $("#dialog").dialog({ 
 
    \t \t \t \t \t autoOpen: false, 
 
       buttons: { 
 
         "With Shipment fee?": { 
 
         \t \t \t \t text: 'With Shipment fee?', 
 
           click: function() { 
 
           \t choice = 1; 
 
           } 
 
         }, 
 
         "Without Shipment fee?": { 
 
         \t \t \t \t text: 'Without Shipment fee?', 
 
           click: function() { 
 
           \t choice = 0; 
 
           } 
 
         }, 
 
         "Cancel": { 
 
         \t \t \t \t \t text: 'Cancel', 
 
         \t \t \t \t \t click: function() { 
 
            \t $("#dialog").dialog('close'); 
 
            } 
 
         }       
 
          
 
         
 
       } 
 
    }); 
 
    
 
    
 
\t \t $("#opener").click(function() { 
 
    \t \t \t $("#dialog").dialog("open"); 
 
\t \t }); 
 
     
 
     $("#storedValue").click(function(){ 
 
\t  var userChoice = doSomething(choice); 
 
     \t if(userChoice != null){ 
 
    \t   alert(userChoice); 
 
       // clear choice 
 
       choice = null; 
 
      }else { 
 
    \t   alert("User did not chose a recordable answer."); 
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<button id="opener">open the dialog</button> 
 
<div id="dialog" title="Refund">Are you sure you want to refund this shipment? If yes then (make selection and close dialog)</div> 
 
<button id="storedValue"> 
 
Get Answer 
 
</button>

Answer 3

まあこれは私が私が欲しかったものを実現する方法である：...

var sel_option; 

$(".shipment_refund").click(function (e) { 
    e.preventDefault(); 
    var dialog = $('<p>Are you sure you want to refund this shipment? If yes then</p>').dialog({ 
     buttons: { 
      "With Shipment fee?": function() { 
       sel_option = 1; 
       shipment_refund(e); 
       dialog.dialog('close'); 
      }, 
      "Without Shipment fee?": function() { 
       sel_option = 0; 
       shipment_refund(e); 
       dialog.dialog('close'); 
      }, 
      "Cancel": function() { 
       dialog.dialog('close'); 
      } 
     } 
    }); 
}); 

しようとしました