如何在jQuery.msgBox中添加HTML select/option元素？

jQuery.msgBox的inputs配置支持自定义输入类型，你可以通过指定type为"select"并配置选项列表，来在弹窗中添加下拉选择框。直接修改你的代码即可实现，示例如下：

$.msgBox({
    title: "Nowy jadłospis",
    type: "prompt",
    inputs: [
        { header: "Podaj nową nazwę jadłospisu."},
        { header: "Podaj opis jadłospisu."},
        { header: "Podaj komentarz do jadłospisu."},
        // 添加select下拉选择框
        { 
            header: "Wybierz typ jadłospisu.",
            type: "select",
            options: [
                { value: "śniadanie", text: "Śniadanie" },
                { value: "obiad", text: "Obiad" },
                { value: "kolacja", text: "Kolacja" }
            ],
            // 可选：设置默认选中项
            defaultValue: "obiad"
        }
    ],
    buttons: [{ value: "OK" }, {value:"Anuluj"}],
    success: function (result, values) {
        if (result == "OK") {
            // values数组按inputs顺序返回所有输入值，包含select选中的value
            console.log("选中的餐类型：", values[3]);
            // 执行你的业务逻辑...
        } else {
            $.msgBox({
                title:"Błąd!",
                content:"Podano nieprawidłową nazwę jadłospisu.",
                type:"error"
            });
        }
    }
});

核心配置说明： #

• type: "select"：将输入项指定为下拉选择框类型
• options数组：定义下拉选项，每个元素需包含value（选项实际值）和text（页面显示文本）
• defaultValue（可选）：设置弹窗加载时默认选中的选项值
• values参数：在success回调中，values会按inputs的顺序返回所有输入内容，其中就包含select选中的value值

内容的提问来源于stack exchange，提问作者bzc0fq