изменение заголовка всплывающей подсказки в зависимости от значения выбранного параметра и вывода в поле ввода

Question

Я хочу, чтобы значение (12-400 мм), например, отображалось во всплывающей подсказке для поля ввода.

Это HTML-код для поля выбора и поля ввода

<label for="select-sector"><b>Fire Rating</b></label>
<select class="form-control" id="fire">
<option value="12mm-400mm" id="1">90/30</option>
<option value="0mm-250mm" id="1">60/30</option>
<option value="0mm-100mm" id="1">120/60</option>

<div class="void form-group" id="void">
<label for="input-void"><b>Void Gap</b> (in millimeters)</label>
<input type="number" value="" placeholder="Input" class="form-control" 
data-placement="bottom" title="gap" id="voidinput" />

Вот Jquery, когда выдается предупреждение, значение отображается нормально.

<script>
    $("#fire").change(function() {
        var firevoid = $(this).children("option:selected").val();
        $('#voidinput').tooltip("The void range of this product is between" + firevoid);
    });


    $('#voidinput').tooltip({
        content: voidrange
    });

    function voidrange() {
        return "The void range of this product is between" + firevoid;
    }

</script>

Answer 1

Я полагаю, что вы используете плагин всплывающей подсказки bootstrap

Сначала вам нужно исправить несколько вещей в вашем коде:

• Вы добавили то же id вoption элементов. id должен быть уникальным в HTML документе. нет необходимости добавлять id к option.
• Для получения текущего значения select вам не нужно находить выбранное option, достаточно просто $('#fire').val().

Итак, если я вас правильно понял, вот код, который вам нужен:

var $input = $('#voidinput');

$("#fire").on('change', function() {   
    $input
        .attr('title', "The void range of this product is between" + $(this).val())
        .tooltip('fixTitle')
        .tooltip('show');        
});

Обычно каждый раз, когда изменяется выбранный параметр, вам нужно изменить titleатрибут input, а затем вызовите методы API tooltip , чтобы отобразить обновленную подсказку.

Рабочий пример