首页 文章

如何将数据值从Bootstrap Modal传递给Parent表单

提问于
浏览 次
0

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

例如，单击下面的输入框，模式将弹出具有data属性的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值从modal传递到父输入框，名称为menu_image_id .

我尝试使用下面的close函数，但无法将模态数据id获取到父窗口 .

$('.show_modal_w').on('hidden.bs.modal', function (e) {
    $(e.relatedTarget);
})
javascript jquery twitter-bootstrap

1 回答

  • 0

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

    而不是捕获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/我把div的id和文本点击在[name = "menu_image_id"]的输入中，但你可以根据自己的意愿调整它 .

    告诉我这是不是你想要的

    回复于

相关问题