如何在 html 选择中使用 bootstrap 4 弹出框

Question

Popover 无法正常工作...它只会让我选择一个选项一次。

这是我的代码

<select name="criteria[]" class="criteria form-control" data-original-title="" title="">
    <option value="=" rel="">=</option>
    <option value=">" rel="">&gt;</option>
    <option value=">=" rel="">&gt;=</option>
    <option value="<" rel="">&lt;</option>
    <option value="<=" rel="">&lt;=</option>
    <option value="!=" rel="">!=</option>
    <option value="like" rel="Use % for wildcards">LIKE</option>
    <option value="not_like" rel="Use % for wildcards">NOT LIKE</option>
    <option value="where_in" rel="Please Input Comma Separated List">IN</option>
</select>

这是我的 JS

$(document).on('change', ".criteria", function(){
    var _this=$(this), rel=_this.find("option:selected").attr("rel");
    if(rel!=''){
        _this.popover('dispose').popover({
            title: 'Instruction',
            content: rel,
            placement: "top",
            delay: { show: 500, hide: 100 }
        });
        return;
    }else{
        _this.popover('dispose');
    }
});

请帮我解决这个问题

Answer 1

$(document).on('change', ".criteria", function(){
    var _this=$(this), rel=_this.find("option:selected").attr("rel");
    if(rel){
        $(this).popover({
            title: 'Instruction',
            content: rel,
            placement: "top",
            delay: { show: 500, hide: 100 }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<select name="criteria[]" class="criteria form-control" data-original-title="" title="">
    <option value="=" rel="">=</option>
    <option value=">" rel="">&gt;</option>
    <option value=">=" rel="">&gt;=</option>
    <option value="<" rel="">&lt;</option>
    <option value="<=" rel="">&lt;=</option>
    <option value="!=" rel="">!=</option>
    <option value="like" rel="Use % for wildcards">LIKE</option>
    <option value="not_like" rel="Use % for wildcards">NOT LIKE</option>
    <option value="where_in" rel="Please Input Comma Separated List">IN</option>
</select>

Answer 2

它在我的测试中可以正常工作，但这里有一些建议和工作演示。

$(document).on('change', '.criteria', function() {
    var _this = $(this), 
        rel = _this.find("option:selected").attr('rel');

    if (rel == '') { // ------------ invert logic for simplicity
        _this.popover('dispose');
    } else {
        _this.popover({ // --------- no need to dispose of the popover if rebuilding it
            title: 'Instruction',
            content: rel,
            placement: "auto",
            delay: { show: 500, hide: 100 }
        });
    }
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

<select name="criteria[]" class="criteria form-control" data-original-title="" title="">
    <option value="=" rel="">=</option>
    <option value=">" rel="">&gt;</option>
    <option value=">=" rel="">&gt;=</option>
    <option value="<" rel="">&lt;</option>
    <option value="<=" rel="">&lt;=</option>
    <option value="!=" rel="">!=</option>
    <option value="like" rel="Use % for wildcards">LIKE</option>
    <option value="not_like" rel="Use % for wildcards">NOT LIKE</option>
    <option value="where_in" rel="Please Input Comma Separated List">IN</option>
</select>