如何将数据值从引导模式传递到父表单

Question

如何将数据属性或单击事件从 Bootstrap 模式传递到父窗体/窗口。

例如， 单击下面的输入框时，将弹出具有数据属性的 div 的模式

<input type="text" name="menu_image_id" class="form-control" data-toggle="modal" data-target=".show_modal_w" />

<input type="text" name="menu_image_id_2" class="form-control" data-toggle="modal" data-target=".show_modal_w" />

模态窗口

<div class="modal fade show_modal_w" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div data-id="1"  data-dismiss="modal">Hello</div>
        <div data-id="2"  data-dismiss="modal">Welcome</div>
        <div data-id="3"  data-dismiss="modal">Morning</div>
    </div>
</div>

现在当用户点击模态框内的 div 时，例如 Hello、Welcome 或 Morning，然后我们需要将 id 值从模态框传递到名为 menu_image_id 的父输入框。

我尝试使用以下关闭功能，但无法将模态数据 id 获取到父窗口。

$('.show_modal_w').on('hidden.bs.modal', function (e) {
    $(e.relatedTarget);
})

Answer 1

我正在尝试与你不同的方式，

我没有捕获 hidden.bs.modal，而是捕获了 div.on.click，所以不是：

$('.show_modal_w').on('hidden.bs.modal', function (e) {
    $(e.relatedTarget);
})

我写的

$("body").on("click", ".show_modal_w div[data-id]", function() {
    $("input[name='menu_image_id']").val($(this).data("id") + " - " + $(this).text());
    $(".show_modal_w").modal("hide");
});

这是一个 jsfiddle：https://jsfiddle.net/f9urohoo/ 我使用 [name="menu_image_id"] 将点击的 div 的 id 和文本放入输入中，但您可以根据需要进行调整。

告诉我是不是你想要的