顯示每個選擇選項的說明

Question

我遇到了一個問題，並希望有助於設計一個創造性的，輕量級的方法。 每次用戶從選擇列表中選擇選項時，我都需要顯示描述性文本。 我會使用類似的東西：

jQuery的

 $('#machines').change(function() { var $selected = $(this).find(':selected'); $('#description').html($selected.data('description')); }).trigger('change'); 

 <div class="form-group"> <label for="machines">Machines</label> <select id="machines" class="form-control"> <option data-description="Printer">Printer</option> <option data-description="Copy">Copy</option> <option data-description="Scanner">Scanner</option> </select> </div> <div class="form-group"> <span id="description"></span> </div> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script type="text-javascript"> $('#machines').change(function() { var $selected = $(this).find(':selected'); $('#description').html($selected.data('description')); }).trigger('change'); </script> 

Answer 1

可能是在文檔准備好之前執行的功能。 嘗試使用document.ready函數，如下所示：

$( document ).ready(function() {
    $('#machines').change(function() {
        var $selected = $(this).find(':selected');
        $('#description').html($selected.data('description'));
    }).trigger('change');
});