2015-10-19 82 views
1

如何将选择的更改事件保存到不会触发的对话框中?对话框中的jquery火灾事件

我的HTML:

<body> 
    <div id="dialog_message"></div> 
    </body> 

我的javascript:

var titolo = 'my dialog'; 
    var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>"; 

    $("#dialog_message").dialog({ 
     resize: 'auto', 
     draggable: true, 
     resizable: false, 
     closeOnEscape: false, 
     open: function() {  // open event handler 
      $(this).parent().find(".ui-dialog-titlebar-close").hide(); 
      $(this).html(s); 
     }, 
     buttons: { 
      Annulla: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     title: titolo 
    }); 
    $("select").selectmenu(); 
    $("#MYSEL1").on("change", function() { 
     var n=$(this).attr("id"); 
     var dd = $("option:selected", this); 
     var d = $(this).val(); 
     alert (d); 
     $("#MYSEL2").empty(); // remove old options 
     if (d=='A') { 
      $("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>'); 
     } else { 
      $("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>'); 
     }; 
    }); 

你可以在的jsfiddle发现:https://jsfiddle.net/t0L915po/5/

回答

0

您将需要添加事件对话框后,选择元素打开。使用下面的代码:

var titolo = 'my dialog'; 
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>"; 

$("#dialog_message").dialog({ 
    resize: 'auto', 
    draggable: true, 
    resizable: false, 
    closeOnEscape: false, 
    open: function() {  // open event handler 
     $(this).parent().find(".ui-dialog-titlebar-close").hide(); 
     $(this).html(s); 
     $("#MYSEL1").on("change", function() { 
    var n=$(this).attr("id"); 
    var dd = $("option:selected", this); 
    var d = $(this).val(); 
    alert (d); 
    $("#MYSEL2").empty(); // remove old options 
    if (d=='A') { 
     $("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>'); 
    } else { 
     $("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>'); 
    }; 
}); 
    }, 
    buttons: { 
     Annulla: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    title: titolo 
}); 
$("select").selectmenu(); 
+0

我只是跑的jsfiddle此代码,并看到它正在运行,显示警报,并且改变第二选择下拉值 –

+0

我有更新的jsfiddle现在是确定的,坦克! – Albo

+0

不客气。如果解决方案工作,请接受答案,以便它也可以帮助其他类似的问题。 –