Как использовать Bootstrap 4 поповера в HTML выберите

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 == '') { // ------------ 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>

Answer 2

$(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>