Question

此代码How to parse value from popover to textbox?是否也可以与Bootstrap 4 beta一起使用？我试图修改此代码，但无法弄清楚。有人可以帮忙吗？谢谢。

Answer 1

referenced Bootstrap 3变体的答案背后的想法仍然存在，它也在Bootstrap 4中工作。我在下面的代码段中的Bootstrap 4环境中创建了我的版本。

请参阅评论中的一些解释。

$(function() {
    var popover = $('[data-toggle="popover"]');

    // Popover init
    popover.popover({
        'content'   : $('#popover-content').html(),
        'html'      : true,
        'placement' : 'auto',
    });

    // Listen to delegated 'change' events, filtered to `.popover select`
    $(document).on('change', '.popover select', function() {
        // `this` is the <select> now
        // No need to find :selected, use $select.val()
        var selected = $(this).val();
        
        $('#input').val(selected);
        popover.popover('hide');
    });
});

<input id="input" type="text" class="form-control" data-toggle="popover" placeholder="placeholder"/>

<div id="popover-content" style="display:none;">
    <select>
        <option>Please select</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

更新以解决点击事件并支持多个输入字段。

下面的第一个片段遵循前一个代码的change事件的逻辑，但现在收听另一个“提交”按钮的click事件。为了使这项工作，必须更改委托事件监听器的选择器，并且必须相应地调整代码处理程序。

$(function() {
    var popover = $('[data-toggle="popover"]');

    // Popover init
    popover.popover({
        'content'   : $('#popover-content').html(),
        'html'      : true,
        'placement' : 'auto',
    });

    // Listen to delegated 'click' events, filtered to `.popover`
    $(document).on('click', '.popover', function(event) {
        // `this` is the '.popover' now
        // `event.target` is the clicked element
        // If clicked element was not a `.btn` then return
        if (!$(this).find('.btn').filter(event.target).length) {
            return;
        }

        // Finding <select> in popover and grab its selected value
        var selected = $(this).find('select').val();
        
        $('#input').val(selected);
        popover.popover('hide');
    });
});

<input id="input" type="text" class="form-control" data-toggle="popover" placeholder="placeholder"/>

<div id="popover-content" style="display:none;">
    <select>
        <option>Please select</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>

    <a href="#" class="btn btn-primary">OK</a>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

虽然使用几行代码仍然很简单，但很难扩展为与多个输入字段一起使用，因为$('#input')在处理程序中是硬编码的。在第一个例子中也是如此。

最后，我想出了另一种方法，将click事件与.one() jQuery方法绑定到popover本身。有了这个，就可以相对引用多个输入字段和相应的popover。

$(function() {
    var inputs = $('[data-toggle="popover"]');

    // Popover init
    inputs.popover({
        'content'   : $('#popover-content').html(),
        'html'      : true,
        'placement' : 'auto',
    });

    inputs.on('shown.bs.popover', function() {
        // 'aria-describedby' is an attribute set by Bootstrap indicationg the #id of popover
        var popover = $('#' + $(this).attr('aria-describedby'));

        // jQuery.one(events [, selector ] [, data ], handler);
        // Passing references to <select> and <input> with `data` to `handler`
        popover.one('click', '.btn', {
                '$select'    : popover.find('select'),
                '$input'     : $(this),
            }, function(event) {
                // `event.data.$select` === `popover.find('select')`, the <select> in the popover
                var selected = event.data.$select.val();

                event.data.$input
                    .val(selected)// set the value of <input>
                    .popover('hide');// hide the popover
        });
    });
});

<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 1"/>
<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 2"/>
<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 3"/>

<div id="popover-content" style="display:none;">
    <select>
        <option>Please select</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option value="maybe">Maybe</option>
    </select>

    <a href="#" class="btn btn-primary">OK</a>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

将值传递给popover输入

1 个答案: