javascript - 对话框中的 jquery 火灾事件

标签 javascript 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/

最佳答案

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

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();

关于javascript - 对话框中的 jquery 火灾事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33214343/

相关文章:

javascript - Laravel API 是否可以使用 Node API,并且该 Node API 在请求中调用相同的 Laravel API?

javascript - jQuery - 使用 Window.Open() 防止弹出窗口阻止程序;

javascript - 如何为可拖动元素添加占位符?

javascript - 如何在 html java 页面中的静态图像上固定标记

jquery - 如何构建一个在一个 div 中垂直滚动但仅在子 div 中水平滚动的网站?

javascript - 在 Rails 6 中测试 jquery

javascript - 没有 href,html 按钮的 onclick 函数

javascript - 无法使用 datatable.js Ajax 添加行

php - jQuery 无法从 href 属性获取文件部分

javascript - 检查字符串是否以标点符号开头(Javascript)